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.getElementById('ThresholdType').addEventListener("change", function(){ 
 
\t 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 2

私はあなたが使用することを意味だと思う：

document.getElementsByName("AdditionalThreshold") 

その場合には、アレイ状の構造体がのNodeListと呼ば返します。 だから、最初のものを選択するように

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

をしたいと思います。どのようにして、

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