JavaScript onchange事件选择输入框

Question

我希望根据我在选择输入框中选择的答案，出现一个子表单。但我不明白为什么它不起作用。控制台没有错误信息，但是什么也没有发生。

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>

- Maurice Greenland

---

在Chrome中似乎运行良好。您已经在哪个浏览器和操作系统上测试过了？ - palaѕн

可能与DOM在Javascript运行之前没有稳定下来有关。人们通常使用jQuery的onReady()或类似的方法来解决这个问题。 - wally

Answer 1

你离答案真的很近 - 只需将 '' 替换为 'block'，就可以在 MacOS High Sierra 上的 Chrome 和 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>

- messerbill

Answer 2

好的，找到了我的错误。我把所有东西都放在了我的“click”事件监听器里面（它处理了我的表单的其余部分-未包含在问题中），这是一件愚蠢的事情！

现在它的样子是这样的，而且它可以工作。它很丑，但我还没完全搞定。

附言：这不是我试图学习的主要焦点。我正在练习使用对象构造函数。

Codepen: https://codepen.io/acekicker77/pen/GQVKEe?editors=0010- 其余代码

//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);

});

- Maurice Greenland