简单的Javascript文本框验证错误

Question

I'm trying to check whether the length of characters typed into the text box is less than 6, and if it is, I want its background to be red. Unfortunately, I can't seem to figure out where I'm going wrong with this simple problem.

 var textBox = getElementsByName('random'); function checkLength() { if (textBox.value.length < 6) { textBox.style.backgroundColor = "red"; } } 

 <input type="text" name="random" onfocus="checkLength();"> 

Answer 1

A few issues in your code:

• you need to put <script> code at the end, so that DOM is loaded and ready before you access elements in it.
• getElementsByName('random') needs to document.getElementsByName('random') , which will actually return a list so you need to get first element from the list.
• Also logically, you need to remove the red background once the text length in input exceeds 6 and it would be better if you attach function to oninput event.

 <input type="text" name="random" oninput="checkLength();"> <script type="text/javascript"> var textBox = document.getElementsByName('random')[0]; function checkLength() { if (textBox.value.length < 6) { textBox.style.backgroundColor = "red"; } else { textBox.style.backgroundColor = "white"; } } </script> 

Answer 2

When the page first loads, the element with a name of random doesn't exist.

You will need to initialise your textBox global after the page loads .

You can do this by replacing

var textBox = document.getElementsByName("random")[0]

with

var textBox;
window.onload = function() {
    textBox = document.getElementsByName("random")[0]
}

Answer 3

Try this

// add an id of "random" to your input
function checkLength() {
  const textBox = document.getElementById("random")
  if (textBox.value.length < 6) {
    textBox.style.backgroundColor = "red";
  } else {
    textBox.style.backgroundColor = "white";
  }
}

Working example: http://jsbin.com/caseqekusi/1/edit?html,js,output

Note: If you want the box to be red right away, you'll have to modify it a bit, let me know if you have questions.

Answer 4

I would suggest to use oninput as well, so it updates as you type and marks the field as "valid" as soon as you have reached a certain length.

You could also get rid of var textbox = ... by using document.activeElement . It makes your function reusable for other input fields. And it no longer matters when your code is loaded.

 function checkLength() { // Get current focused element const textBox = document.activeElement; if ( !textBox.value || textBox.value.length < 6 ) { textBox.style.backgroundColor = "red"; } else { textBox.style.backgroundColor = "#fff"; } } 

 <input type="text" name="random" onfocus="checkLength()" oninput="checkLength()">