세 가지 값 (이름, 성별 및 문자)이 포함 된 내러티브 텍스트 개인화

Question

이 코드에 문제가 있습니까? Google 사이트 HTML 상자에서 작동하지 않습니다. 내 문제인지 아니면 Google인지 알 수 없습니다.

저는 사용자가 입력 한 이름, 성별 및 문자에 따라 텍스트를 개인 설정하려고합니다.

<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

코드는 gender라는 드롭 다운을 참조하지만 실제로 올바른 ID에 첫 번째 onchange를 핸들러를 변경

genderselect라고합니다.

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