JavaScript change input field border color when detect one of specific inputs

Question

This is not a duplicate, I've done a lot of research and found nothing that would work for me I need my input field border color to change everytime specific input was detected, but it doesn't work. JS here

Edit: Fixed some stupid mistakes

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;');
    }
}

Please help

HTML here

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

var inputVal = document.getElementsByClassName("cisla"); What element are you trying to select here? I see no elements with class="cisla". Also, class=cislo1 without quotes is not valid syntax. getElementsByClassName returns a list of elements, not a singular element - maybe you meant to iterate through the list instead — awarrier99
– awarrier99, Commented Jun 11, 2020 at 20:19
Even fixing class cisla I bet that the problem occurs only for inputVal.value == "0", am I wrong? — Roberto Caboni
– Roberto Caboni, Commented Jun 11, 2020 at 20:23

user120242 · Accepted Answer · 2020-06-11 20:34:03Z

A few issues:

cisla is an id, not a class name
you don't have any event binded to your zmenitBarvu function
you aren't applying the borders to the input elements themselves nor checking the values on them, but only the form with id cisla
else will overwrite styles set when "0" is matched with value, because else is on anything that's not "2" only. You need to chain the else if so only one executes.

Demo using event delegation. I recommend just using the same class name so they use the same selector for class, and same name (unless form data requires incremented names), and not using an id at all, since it's unnecessary. I'm using cislo prefixed class name input elements selector to match elements:

function zmenitBarvu() {
    document.getElementById("cisla").addEventListener('input',event=>{
    var inputVal = event.target;
    if(!inputVal.matches('input[class^=cislo]')) return;

    if (inputVal.value === "0") {
         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');
    }
    else if (inputVal.value === "2") {
         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');
    }
    else {
        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');
    }

    });
}
zmenitBarvu()

<div class="form">
    <form id="cisla"> 
        <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>
        <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
        <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
        <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
        <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>
        <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
        <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
        <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
        <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
        <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
        <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
        <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>
    </form>
</div>

Demo based on fixing your original attempt, that binds to every child of the cisla form.

function zmenitBarvu() {
    document.getElementById("cisla").childNodes.forEach(inputVal=>{
    inputVal.addEventListener('input',event=>{
    if (inputVal.value == "0") {
         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');
    }
    else if (inputVal.value == "2") {
         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');
    }
    else {
        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');
    }
    });
    });
}
zmenitBarvu()

<div class="form">
    <form id="cisla"> 
        <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>
        <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
        <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
        <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
        <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>
        <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
        <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
        <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
        <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
        <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
        <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
        <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>
    </form>
</div>

You're just awesome, ain't you? Working, thank you, appreciate

Collectives™ on Stack Overflow

JavaScript change input field border color when detect one of specific inputs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related