javascript - 如果使用类名填充，则更改输入样式

Question

我发现 fiddle 可以在填充时更改输入样式。但它正在使用ID。我想使用类名。我用了document.getElementsByClassName() ，但它不起作用。任何人都可以帮忙吗？谢谢。

这是代码

html

<input type="text" id="subEmail" onchange="checkFilled();"/>

Javascript

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
}
else{
    inputVal.style.backgroundColor = "";
}
}

checkFilled();

这里是 Fiddle 的链接

Answer 1

getElementsByClassName() 返回 dom 元素数组，因此您需要使用 inputVal[0] 代替 inputVal

function checkFilled() {
  var inputVal = document.getElementsByClassName("subEmail");
  if (inputVal[0].value == "") {
    inputVal[0].style.backgroundColor = "yellow";
  } else {
    inputVal[0].style.backgroundColor = "";
  }
}

checkFilled();

<input type="text" class="subEmail" onchange="checkFilled();" />

Document.getElementsByClassName() : Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

取自: here