使用三个值(名称,性别和角色)个性化叙述文本

时间:2012-11-23 22:19:41

标签: function variables onchange html personalization

此代码有问题吗?它不适用于谷歌网站HTML Box,我不知道这是我的问题还是谷歌的......

我只是想根据用户输入的名称,性别和角色来个性化文字。

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

1 个答案:

答案 0 :(得分:1)

您的代码引用了一个名为gender的下拉列表,但它实际上称为genderselect

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

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