Change the color of an element when text is typed in input?

Question

Change the color of an element when text is typed in input?

150 Views Asked by Christian Samu At 28 July 2023 at 10:19

I'm looking for a way to change the style of an element, (like the <body>) when not just text, but specific number like "5214" or something is entered in an <input>. With my current code, a Uncaught TypeError: Cannot set properties of undefined (setting 'innerText') gets thrown. How can I fix it? The error is on line 3. I saw something like this on an ADT security system panel, but was instead using an <input type="hidden">. There were using 4 <span> elements too.

HTML CSS JS

const inputField = document.getElementsByClassName("doSomething");

if(inputField[0].innerText = "5214") {
  document.getElementsByTagName("body").style.backgroundColor = "lime";
}

input {
  background-color: #ffffff;
}

<label>Numbers only:</label><input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
<br>
<label>Numbers and decimal points only:</label>
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

Original Q&A

There are 2 best solutions below

Pravin Tidake On 28 July 2023 at 11:01

First of all the class doSomething is missing in your inputs and for body selector

document.getElementsByTagName("body").style.backgroundColor = "lime";

add [0] index for it then your code will run successfully...

as give below of my code.

Html Code

<label>Numbers only:</label>
    <input type="text" class="doSomething" onkeyup="changeColor()" />
    <br>
    <label>Numbers and decimal points only:</label>
    <input type="text" class="doSomething" onkeyup="changeColor()" />

Javascript Code

<script>
    const inputField = document.getElementsByClassName("doSomething");
    console.log(inputField[0])

    let changeColor = () => {
        if (inputField[0].value == "5214") {
            let body = document.getElementsByTagName("body")[0];
            body.style.backgroundColor = "lime";
        }
    }
</script>

**Amolgorithm** · Accepted Answer · 2023-07-28T10:33:57.933000

There are many problems to address in that code.

In your HTML, the input tags aren't specified with a class name, but you are saying that they are of class doSomething in your javascript. Thus, there are currently NO elements of class doSomething, which is why document.getElementsByClassName("doSomething") returns undefined.
When your condition in the if statement is inputField[0].innerText = "5214", you are not comparing both values to check if they are equal. You are assigning. Wrong operator. For comparison, you need to use ==.
Also, to get the text inside an input element, you can't use the innerText property, since they don't work like text elements. Instead, you need to use value.
Doing document.getElementsByTagName("body") would return an array, not the only body element you have, because you could have many. So, presuming you only have one body tag, you could do document.getElementsByTagName("body")[0].
You must check the value of the input AFTER keyup, not keypress, because the value doesn't change before the keypress. It only does that before keyup. So you are checking the previous value with keypress, not the current. Therefore, you must use onkeyup.
BTW, when you say document.getElementsByTagName("body")[0].style, as long as you have only one body tag (which you should), you should instead say document.body.style. Obviously, the second one is easier, simpler and makes more sense than the first.

Here is the final code which works:

const inputField = document.getElementsByClassName("doSomething");

function check() {
  if(inputField[0].value == "5214") {
    document.body.style.backgroundColor = "lime";
  } else {
    document.body.style.backgroundColor = "white";
  }
}

<label>Numbers only:</label>
<input class="doSomething" type="text" onkeyup="check()" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"/>
<br>
<label>Numbers and decimal points only:</label>
<input class="doSomething" type="text" onkeyup="check()"  onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))"/>

Change the color of an element when text is typed in input?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-INPUT

Trending Questions

Popular # Hahtags

Popular Questions