Personalizing narrative text with three values (name, gender, and character)

Question

Is something wrong with this code? It's not working in Google sites HTML Box, and I don't know if it's my problem or Google's ...

I'm just trying to personalize text according to user-inputed name, gender, and character.

<script>

function personalize (name, gender, character) {
    var Name = name;

  if (Name !== "") {

    $('.NameComma').html(name + ", ");

    if (character === 'baptist') {

      $('.baptistname').html(name);
    }
    else {
      $('.baptistname').html("");
    }
  }
  else {
    $('.Name').html("");
  }

  if (gender === 'male') {
    $('.mychild').html("My son, ");
  }
  else if (gender === 'female') {
    $('.mychild').html("My daughter, ");
  }
  else {
    $('.mychild').html("");
  }

  if (character === 'baptist') {
    $('.baptist1').html("You");
  }
  else {
    $('.baptist1').html("John the Baptist");
  }

  if (character === 'philip') {
    $('.philip1').html("you");
  }
  else {
    $('.philip1').html("Philip");
  }

  if (character === 'nathanael') {
    $('.nathanael1').html("you");
  }
  else {
    $('.nathanael1').html("Nathanael");
  }
}
</script>

<p><b>Name:</b> <input name="name" type="text" value="" style="position: relative; top:     -4px;" id="namebox" onchange="personalize(document.getElementById('namebox').value,document.getElementById('gender').value,document.getElementById('characterselect').value)"/>
<select name="gender" id="genderselect" onchange="personalize(document.getElementById('namebox').value,document.getElementById('genderselect').value,document.getElementById('characterselect').value)">
  <option id="none" value="none">Select your gender:</option>
  <option id="male" value="male">Male</option>
  <option id="female" value="female">Female</option></select>
<select name="character" id="characterselect" onchange="personalize(document.getElementById('namebox').value,document.getElementById('genderselect').value,document.getElementById('characterselect').value)">
  <option id="none" value="none">Choose your character:</option>
  <option id="baptist" value="baptist">John the Baptist</option>
  <option id="philip" value="philip">Philip</option>
  <option id="nathanael" value="nathanael">Nathanael</option>
  </select>

<span class="baptist1">John the Baptist</span><span class="NameComma"></span><span class="mychild"></span> told <span class="philip1">Philip</span>, who told <span class="nathanael1">Nathanael</span>.

Answer 1

Your code references a dropdown called gender, but it is actually called genderselect

Change your first onchange handler to the right ID.

onchange="personalize(document.getElementById('namebox').value,document.getElementById('genderselect').value,document.getElementById('characterselect').value)"