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> 

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> 

Answer 2

好的，發現我的錯誤。 我把我的'click'事件監聽器（處理剩余的表單 - 未包含在問題中）放在INSIDE中 - 這是一個愚蠢的事情！

以下是它現在的樣子，它的工作原理。 它的丑陋，但我沒有完成。

PS-這不是我試圖學習的主要焦點。 我試圖使用對象構造函數練習。

Codepen： https ：//codepen.io/acekicker77/pen/GQVKEe ？ edit = 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);

});