Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The way you approached it is somewhat good, but basically the problem you have is just that there are errors in your Js Code, The Corrected one is You can View the working version of it here <a href="http://jsfiddle.net/9zeD9/" rel="nofollow">http://jsfiddle.net/9zeD9/</a></p> <pre><code>&lt;p&gt; &lt;select id="gender"&gt; &lt;option value="male"&gt;male&lt;/option&gt; &lt;option value="female"&gt;female&lt;/option&gt; &lt;/select&gt; Alice was a &lt;select id="behave"&gt; &lt;option value="good"&gt;good&lt;/option&gt; &lt;option value="naughty"&gt;naughty&lt;/option&gt; &lt;/select&gt; &lt;span class="boygirl"&gt;girl &lt;/span&gt;. &lt;span class="plotelement1"&gt; &lt;span class="HeShe"&gt;She&lt;/span&gt; was constantly being told off by &lt;span class="hisher"&gt;her&lt;/span&gt; &lt;span class="mainparent"&gt;mother&lt;/span&gt; &lt;/span&gt;. &lt;/p&gt; &lt;script&gt; function genderChange(){ var newgender = $("#gender").val(); if(newgender == "male"){ $(".heshe").html("he"); $(".HeShe").html("He"); $(".himher").html("him"); $(".hisher").html("his"); } else { $(".heshe").textContent = "she"; $(".HeShe").textContent = "She"; $(".himher").textContent = "her"; $(".hisher").html("her"); } } $(function(){ changeBehaviour();// These 2 lines run after loading the whole page. genderChange(); // $("#gender").change(function(){ changeBehaviour();// Change the behaviours first genderChange(); // Then change the gender as the behaviour code has // gender's span like ".hisher" so this has to be the // order. }); $("#behave").change(function(){ changeBehaviour(); genderChange(); }) }); function changeBehaviour(){ switch($("#behave").val()){ case "good":{ $(".plotelement1").html('&lt;span class="HeShe"&gt;She&lt;/span&gt; made &lt;span class="hisher"&gt;her&lt;/span&gt; parents proud of &lt;span class="himher"&gt;her&lt;/span&gt; and they told &lt;span class="himher"&gt;her&lt;/span&gt; all the time how good &lt;span class="heshe"&gt;she&lt;/span&gt; was.'); break; } default:{ $(".plotelement1").html('&lt;span class="HeShe"&gt;She&lt;/span&gt; was constantly being told off by &lt;span class="hisher"&gt;her&lt;/span&gt; &lt;span class="mainparent"&gt;mother&lt;/span&gt;'); } } } &lt;/script&gt; </code></pre> <p>PS: Since You are using Jquery, to change the contents of any tag use, </p> <pre><code>$(".hisher").html("his") </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload