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

我现在看到了我的问题。更改“禁用”以禁用并创建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;
}
});

你究竟如何使用javascript dom事件--- addEventListener

2 个答案: