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

🙂

25 Replies

timoOP•12mo ago

Jochem•12mo 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

timoOP•12mo 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•12mo ago

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

timoOP•12mo 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•12mo ago

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

timoOP•12mo ago

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

Jochem•12mo ago

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

timoOP•12mo ago

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

Jochem•12mo ago

set a border on inputElement as well

timoOP•12mo ago

what?

Jochem•12mo 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";

timoOP•12mo ago

still does this

Jochem•12mo 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

timoOP•12mo ago

Jochem•12mo ago

inputElement, not numberElement sorry, my bad

timoOP•12mo ago

have this now

timoOP•12mo ago

fixed it

Skylark•12mo 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