Javascript style.display無法與表單一起使用

Question

我知道這個問題在其他線程上也有所不同，但似乎沒有一個對我的回答有所幫助。 希望這是一個簡單的...我在做什么錯？

我有一個選項字段，當用戶選擇“ Between”作為下拉選項時，我希望它添加另一個輸入框-在這種情況下稱為“ AdditionalThreshold”。

 function toggleMe(a) { var e=document.getElementByName("AdditionalThreshold"); if(e.style.display=="none"){ e.style.display = "block"; } else { e.style.display = "none"; } return true; } 

 <td> <select name="ThresholdType"> <option value="GreaterThan">Greater than or Equal to</option> <option value="Between" onClick="toggleMe('BetweenField')">Between</option> <option value="LessThan">Less than</option> </select> </td> <td> <input name="Threshold" type="text" size="4" /> <input name="AdditionalThreshold" type="text" id="BetweenField" size="4" style="display:none;"> </td> 

我是新手，請原諒我的編碼，但對您的幫助將不勝感激。

謝謝

Answer 1

我認為您的意思是使用：

document.getElementsByName("AdditionalThreshold")

在這種情況下，將返回一個稱為NodeList的類似數組的結構。 所以你想做

document.getElementsByName("AdditionalThreshold")[0]; 

選擇第一個。 （假設多數民眾贊成在那個）

Answer 2

 document.getElementById('ThresholdType').addEventListener("change", function(){ var visibility = (this.value === 'Between')?"block":"none"; console.log(this.value); document.getElementsByName('AdditionalThreshold')[0].style.display = visibility; }) 

 <select id="ThresholdType"> <option value="GreaterThan">Greater than or Equal to</option> <option value="Between">Between</option> <option value="LessThan">Less than</option> </select> <input id="Threshold" type="text" size="4" /> <input name="AdditionalThreshold" type="text" id="BetweenField" size="4" style="display:none;"> 

Answer 3

<select name="ThresholdType">
    <option value="GreaterThan">Greater than or Equal to</option>
    <option value="Between">Between</option>
    <option value="LessThan">Less than</option>
</select>
<input name="Threshold" type="text" size="4" />
<input name="AdditionalThreshold" type="text" id="BetweenField" size="4" class="hide">

<script>
function toggleBetween(event) {
    if(event.target.value.toLowerCase() === 'between') {
      document.querySelector('#BetweenField').classList.remove('hide');
    } else {
      document.querySelector('#BetweenField').classList.add('hide');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('select[name="ThresholdType"]').addEventListener('change', toggleBetween, false);
})
</script>

<style>
.hide {
    display: none;
}
</style>

http://jsbin.com/pigocekava/1/edit?html,css,js，輸出