JavaScript 在检测到特定输入之一时更改输入字段边框颜色

Question

这不是重复的，我做了很多研究，发现没有什么适合我的东西，我需要我的输入字段边框颜色在每次检测到特定输入时更改，但它不起作用。这里

编辑：修复了一些愚蠢的错误

function zmenitBarvu() {

    var inputVal = document.getElementsById("cisla");

    if (inputVal.value == "0") {

         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');

    }

    if (inputVal.value == "2") {

         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');

    }

    else {

        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');

    }

}

请帮忙

这里

<div class="form">

    <form id="cisla"> 

        <input name="cislo1" type="text" class="cisla" placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>

        <input name="cislo2" type="text" class="cisla" placeholder="" id="cislo2" /><br>

        <input name="cislo3" type="text" class="cisla" placeholder="" id="cislo3" /><br>

        <input name="cislo4" type="text" class="cisla" placeholder="" id="cislo4" /><br>

        <input name="cislo5" type="text" class="cisla" placeholder="" id="cislo5" /><br>

        <input name="cislo6" type="text" class="cisla" placeholder="" id="cislo6" /><br>

        <input name="cislo7" type="text" class="cisla" placeholder="" id="cislo7" /><br>

        <input name="cislo8" type="text" class="cisla" placeholder="" id="cislo8" /><br>

        <input name="cislo9" type="text" class="cisla" placeholder="" id="cislo9" /><br>

        <input name="cislo10" type="text" class="cisla" placeholder="" id="cislo10" /><br>

        <input name="cislo11" type="text" class="cisla" placeholder="" id="cislo11" /><br>

        <input name="cislo12" type="text" class="cisla" placeholder="" id="cislo12" /><br>

    </form>

</div>

Answer 1

几个问题：西斯拉是一个 id，而不是一个类名您没有任何事件绑定到您的zmenit巴武函数您没有将边框应用于输入元素本身，也没有检查它们的值，而只是检查id为cisla的表单否则将覆盖当“0”与值匹配时设置的样式，因为 else 仅在任何不是“2”的内容上。如果需要，您需要链接其他内容，则只有一个执行。使用事件委派的演示。我建议只使用相同的类名，以便它们对类使用相同的选择器和相同的名称（除非表单数据需要递增的名称），并且根本不使用id，因为这是不必要的。我正在使用cislo前缀的类名输入元素选择器来匹配元素：function zmenitBarvu() {&nbsp; &nbsp; document.getElementById("cisla").addEventListener('input',event=>{&nbsp; &nbsp; var inputVal = event.target;&nbsp; &nbsp; if(!inputVal.matches('input[class^=cislo]')) return;&nbsp; &nbsp; if (inputVal.value === "0") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');&nbsp; &nbsp; }&nbsp; &nbsp; else if (inputVal.value === "2") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');&nbsp; &nbsp; }&nbsp; &nbsp; });}zmenitBarvu()<div class="form">&nbsp; &nbsp; <form id="cisla">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>&nbsp; &nbsp; </form></div>基于修复原始尝试的演示，该尝试绑定到cisla形式的每个子级。function zmenitBarvu() {&nbsp; &nbsp; document.getElementById("cisla").childNodes.forEach(inputVal=>{&nbsp; &nbsp; inputVal.addEventListener('input',event=>{&nbsp; &nbsp; if (inputVal.value == "0") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');&nbsp; &nbsp; }&nbsp; &nbsp; else if (inputVal.value == "2") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');&nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; });}zmenitBarvu()<div class="form">&nbsp; &nbsp; <form id="cisla">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>&nbsp; &nbsp; &nbsp; &nbsp; <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>&nbsp; &nbsp; </form></div>