Function 使用三个值（姓名、性别和角色）个性化叙述文本

这个代码有问题吗？它在谷歌网站HTML框中不起作用，我不知道这是我的问题还是谷歌的

我只是想根据用户输入的姓名、性别和角色对文本进行个性化设置

<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>.

功能个性化（姓名、性别、角色）{
变量名称=名称；
如果（名称！==“”）{
$（'.namecoma'）.html（名称+“，”）；
如果（字符==‘浸信会’）{
$（'.baptistname'）.html（名称）；
}
否则{
$（'.baptistname'）.html（“”）；
}
}
否则{
$（'.Name'）.html（“”）；
}
如果（性别==‘男性’）{
$（'.mychild'）.html（“我的儿子，”）；
}
else if（性别==‘女性’）{
$（'.mychild'）.html（“我的女儿，”）；
}
否则{
$（'.mychild'）.html（“”）；
}
如果（字符==‘浸信会’）{
$（'.batist1'）.html（“您”）；
}
否则{
$（'.baptist1'）.html（“施洗约翰”）；
}
如果（字符=='philip'）{
$（'.philip1'）.html（“您”）；
}
否则{
$（'.philip1'）.html（“Philip”）；
}
如果（字符=='Nathanel'）{
$（'.NathaneL1'）.html（“您”）；
}
否则{
$（'.Nathanel1'）.html（“Nathanel”）；
}
}
姓名：
选择您的性别：
男性
女性
选择您的角色：
施洗约翰
菲利浦
纳撒尼尔
施洗约翰告诉腓力，腓力告诉拿但业。

您的代码引用了一个名为

gender

的下拉列表，但实际上它被称为

genderselect

将第一个onchange处理程序更改为正确的ID

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

---

什么不起作用？你有错误吗？