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

Solution

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