Question

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

df_html

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

Answer 1

你真的非常接近 - 只需添加'block'而不是''然后它就会被显示（在MacOS High Sierra的chrome和safari中进行测试）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

好的，发现了我的错误。我把所有内容都放在了我的“点击”内容中。事件监听器（处理表格的其余部分 - 不包括在问题中） - 这是一件愚蠢的事情！

以下是它现在的样子，并且它有效。它的丑陋，但我没有完成。

PS-这不是我试图学习的主要焦点。我正在尝试使用Object Constructors练习。

Codepen：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事件选择输入

2 个答案: