如何使用javascript dom事件--- addEventListener

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更改为禁用并创建true和false状态之后，而不是按钮的false和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; 
} 
});