want to change my border when the code is correct but dunno how to get id without to keep it in html

🙂

25 Replies

timo•5mo ago

Jochem•5mo ago

not sure what you're asking. That first branch in your if statement isn't doing anything it's much easier for people to help if you share your code in codepen or something similar, but if that's too hard, at the very least in code blocks instead of screenshots

timo•5mo ago

like want the border to trun green when == code and else to turn red

const main = () => {
    const code = 13;

    const inputElement = document.getElementById('codeinput');
    const numberElement = document.getElementById('numberoutput')

    inputElement.addEventListener('input', (event) => {
        inputValue = event.target.value;
        numberElement.innerHTML = inputValue;
        if (inputValue == code) {
            numberElement.getElementById = "green";
        } else {
            numberElement.style.color = "black";
        }
    });
}

addEventListener("load", main);

const main = () => {
    const code = 13;

    const inputElement = document.getElementById('codeinput');
    const numberElement = document.getElementById('numberoutput')

    inputElement.addEventListener('input', (event) => {
        inputValue = event.target.value;
        numberElement.innerHTML = inputValue;
        if (inputValue == code) {
            numberElement.getElementById = "green";
        } else {
            numberElement.style.color = "black";
        }
    });
}

addEventListener("load", main);

Jochem•5mo ago

that's not python code, you should use ```js 🙂 numberElement.getElementById = "green"; this isn't anything, you probably mean numberElement.style.color = "green";

timo•5mo ago

const main = () => {
    const code = 13;

    const inputElement = document.getElementById('codeinput');
    const numberElement = document.getElementById('numberoutput')

    inputElement.addEventListener('input', (event) => {
        inputValue = event.target.value;
        numberElement.innerHTML = inputValue;
        if (inputValue == code) {
            numberElement.getElementById = "green";
        } else {
            numberElement.style.color = "black";
        }
    });
}

addEventListener("load", main);

const main = () => {
    const code = 13;

    const inputElement = document.getElementById('codeinput');
    const numberElement = document.getElementById('numberoutput')

    inputElement.addEventListener('input', (event) => {
        inputValue = event.target.value;
        numberElement.innerHTML = inputValue;
        if (inputValue == code) {
            numberElement.getElementById = "green";
        } else {
            numberElement.style.color = "black";
        }
    });
}

addEventListener("load", main);

Jochem•5mo ago

though that wouldn't change the border, to change the border you'd do something like numberElement.style.borderColor = "green";

timo•5mo ago

i know had that bef but need to change the boarder also

Jochem•5mo ago

numberElement.style.border = "2px solid green"; should give you a border

timo•5mo ago

how can i get the one above green? cuz now i have 2

Jochem•5mo ago

set a border on inputElement as well

timo•5mo ago

what?

Jochem•5mo ago

you're setting a border on numberElement, right? that same way, you can set a border on inputElement inputElement.style.border = "2px solid green";

timo•5mo ago

still does this

Jochem•5mo ago

ah, that's because the focus state is styled differently... you can't style that using javascript, not easily like this at least your best bet would be to use classList to add and remove a class, probably

numberElement.classList.add('valid')

numberElement.classList.add('valid')

and then in css

.valid:focus {
  outline: 1px solid green;
}

.valid:focus {
  outline: 1px solid green;
}

be careful styling outlines on input elements though, it's a pretty big accessibility issue if there's no visual clue as to what element is focused

timo•5mo ago

Jochem•5mo ago

inputElement, not numberElement sorry, my bad

timo•5mo ago

have this now

timo•5mo ago

fixed it

Skylark•5mo ago

Now that that is fixed. You have inputValue == code and while this will work it’s bad practice to compare different types, either change code into a string code = '13'; or have it explicitly converted when checking inputValue == code.toString(). If you change the input type to number you can then do parseFloat(inputValue) == code (you have to do Float because someone can enter 13.1 and parseInt won’t return exactly that. It’s better to leave the input as a string and not worry about it not necessarily being a number because it will be a number when it matches) JavaScript isn’t as explicit about what types things are but they do exist and you can avoid shooting yourself in the foot if you always only compare the same types

Gaming

Programming

want to change my border when the code is correct but dunno how to get id without to keep it in html