Question 217835 in Html Question posted in
Some basic documentation can be found here.

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

I’m looking for a way to change the style of an element, (like the <body>) when not just text, but specific text like "example" 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.

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)))" />
Tags:

2

Answers


  1. 0

    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.
    • You cannot return from onkeypress. You must instead call a function containing your code.
    • 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";
  }
}
    <label>Numbers only:</label>
<input class="doSomething" type="text" onkeyup="check()" />
<br>
<label>Numbers and decimal points only:</label>
<input class="doSomething" type="text" onkeyup="check()" />
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search