どのように正確にJavaScriptのDOMイベントを使用しますか？

Question

<input type = "text" id = "Height"> 
<button type = "button" id = "Work!" disabled = "true"> Work! </button> 
<script> 
var Height = document.getElementById("Height"); 
var Button = document.getElementById("Work!"); 

Height.addEventListener("input",function() { 
if(Height.value!= "") { 
Button.disabled = false; 
} else { 
Button.disabled = false; 
} 
}); 

ユーザーが入力フィールドに値を入力したときにボタンが有効にならない理由はわかりません。私は可能なすべての組み合わせを試して2時間以上を過ごしました。私の塩分レベルは現時点で屋根から外れています。どんな助けも大歓迎です。

Answer 1

ユーザが入力フィールドに値を入力すると、ボタンが有効になります。

<script> 
function toggleButton(ref,bttnID){ 
document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true); 
} 
</script> 
<form action="" method="post" id="subscribe" name="subscribe"> 
<label>Height:</label> 
<input type="text" name="height" onkeyup="toggleButton(this,'bttnsubmit');"> 
<input type="button" name="btnsubmit" value="Subscribe" disabled='disabled' id='bttnsubmit' /> 
</form> 

Answer 2

私の問題が表示されます。無効にするためにDisabledを変更し、ボタンのfalseおよびfalseの状態の代わりにtrueおよびfalseの状態を作成します。私は、私が望むように完全に動作するはずの次のより良いコードを思いついた。

<input type = "text" id = "Height"> 
<button type = "button" id = "Work!" disabled = "true"> Work! </button> 
<script> 
var Height = document.getElementById("Height"); 
var Button = document.getElementById("Work!"); 

Height.addEventListener("input",function() { 
if(Height.length === 0 || Height.value == 0) { 
Button.disabled = true; 
} else { 
Button.disabled = false; 
} 
});