const btn = document.getElementById("btn");
const inputfield = document.getElementById("username");
inputfield.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
btn.disabled = true;
btn.style.backgroundColor = "grey";
} else {
btn.disabled = false;
btn.style.backgroundColor = "orange";
}
})<div class="container">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>现在的问题是它只适用于一个输入和相关的按钮字段它不适用于另一对输入字段和按钮，所以我应该在上面运行与输入字段一样多的javascript代码中进行哪些更改和我想要的按钮？
请任何人都可以帮助我。谢谢
如果您有完整的 jquery 代码，它也被接受。
我的方法是将输入和按钮放在带有自定义类的 div 中。只需遍历每个 div，获取子输入和按钮，然后将现有代码用于每个 div。
const btns = document.getElementsByClassName('inputButton');
for (let i = 0; i < btns.length; i++) {
let input = btns[i].querySelector('input');
let button = btns[i].querySelector('button');
input.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
button.disabled = true;
button.style.backgroundColor = "grey";
} else {
button.disabled = false;
button.style.backgroundColor = "orange";
}
});
}<div class="container">
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句