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

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

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

请帮忙

这里是HTML

<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>

几个问题：

cisla是一个id，而不是类名 没有任何事件绑定到zmenitBarvu函数 您没有将边框应用于输入元素本身，也没有检查输入元素上的值，只检查id为cisla的表单 当0与值匹配时，else将覆盖设置的样式，因为else位于除2之外的任何对象上。如果只有一个执行，则需要链接else。 演示使用。我建议只使用相同的类名，以便它们对类使用相同的选择器，并使用相同的名称，除非表单数据需要递增的名称，并且完全不使用id，因为这是不必要的。我使用cislo前缀类名输入元素选择器来匹配元素：

函数zmenitBarvu{ document.getElementByIdcisla.addEventListener'input'，事件=>{ var inputVal=event.target； 如果！inputVal.matches'input[class^=cislo]'返回； 如果inputVal.value==0{ inputVal.setAttribute“样式”，“边框：5px实心f5d442！重要；”； } 如果inputVal.value==2，则为else{ inputVal.setAttribute“样式”，“边框：5px实心f5d442！重要；”； } 否则{ inputVal.setAttribute'style'，'border:1px solid ccc！important；'； } }; } zmenitBarvu

---

var inputVal=document.getElementsByClassNamecisla；您试图在此处选择什么元素？我没有看到class=cisla的元素。此外，不带引号的class=cislo1语法无效。GetElementsByCassName返回一个元素列表，而不是单个元素-也许你是想迭代列表而不是修复类cisla，我打赌问题只发生在inputVal.value==0，我错了吗？你真是太棒了，不是吗？工作，谢谢，谢谢

<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>