Javascript onchange 事件 Select 输入

Question

我希望根据我在 select 输入中选择的答案显示一个子表单。我不明白为什么它不起作用。控制台中没有错误消息，但没有任何反应。

document.getElementById('isAthlete').onchange = function(){
if(this.value == 'yes'){
   document.getElementById('athleteQ').style.display = '';
   } else {
   document.getElementById('athleteQ').style.display = 'none';
   }
};

<p>If I select 'yes': <br>

<select id='isAthlete' name='isAthlete'>
                <option value="-">-</option>
                <option value="yes">yes</option>
                <option value="no">no</option>
    </select>

<p>Then I want to display these inputs: <br>

<div id='athleteQ' style='display: none'>
    Sport?<input type='text' id='sport' name='sport'><br>
    Medals?<input type='text' id='medals' name='medals'><br>
    Comps?<input type='text' id='competitions' name='competitions'><br>
</div>

Answer 1

你真的很接近 - 只需添加 'block' 而不是 '' 然后它应该显示（在 chrome 和 MacOS High Sierra 上的 safari 中测试）：

document.getElementById('isAthlete').onchange = function(){
if(this.value == 'yes'){
   document.getElementById('athleteQ').style.display = 'block';
   } else {
   document.getElementById('athleteQ').style.display = 'none';
   }
};

<select id='isAthlete' name='isAthlete'>
  <option value="-">-</option>
  <option value="yes">yes</option>
  <option value="no">no</option>
</select>

<div id='athleteQ' style='display: none'>
    Sport?<input type='text' id='sport' name='sport'><br>
    Medals?<input type='text' id='medals' name='medals'><br>
    Comps?<input type='text' id='competitions' name='competitions'><br>
</div>

Answer 2

好的，发现我的错误。我把所有东西都放在我的 'click' 事件侦听器中（它正在处理我表单的其余部分 - 不包括在问题中） - 这是一件愚蠢的事情！

这是它现在的样子，并且可以正常工作。好丑，还没看完

PS- 这不是我试图学习的主要重点。我正在尝试练习使用对象构造函数。

代码笔：https://codepen.io/acekicker77/pen/GQVKEe?editors=0010 - rest of code

//ONCHANGE EVENT
document.getElementById('isAthlete').onchange = function(){
if(this.value == 'yes'){
   document.getElementById('athleteQ').style.display = 'block';
   } else {
   document.getElementById('athleteQ').style.display = 'none';
   }
}

//Get Form Input Values
document.querySelector('#enter').addEventListener('click', function(){
        //Get values from form
        name = document.querySelector('#name').value;
        dateInput = document.querySelector('#yob').value;
        yob = new Date(dateInput);
        yob = yob.getFullYear(dateInput);
        gender = document.querySelector('.gender').value;
        sport = document.querySelector('#sport').value;
        medals = document.querySelector('#medals').value;
        competitions = document.querySelector('#competitions').value;

        //CREATE INSTANCE
        newInstance(name, yob, gender, athlete);

        //Display Result
        document.querySelector('#result').innerHTML = doMessage(Peep.name, Peep.yearBirth, Peep.calcAge(), Peep.gender, Peep.isAthlete);

});

Javascript onchange 事件 Select 输入

Javascript onchange event Select input

javascript

onchange