Question

如果填充，我发现改变输入样式的小提琴。但它正在使用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();" />

10:23:55.521803 [INFO] eceb [ 41] 235 870 1 26601 349 910
10:24:11.771454 [INFO] eceb [ 41] 41 870 0 26601 349 910
10:25:18.858675 [INFO] eceb [ 41] 235 870 3 26601 349 910
10:25:18.814763 [INFO] eceb [ 41] 60 1247 0 38490 163 715
10:25:19.844738 [INFO] eceb [ 41] 60 1248 0 38490 163 715
10:24:11.771454 [INFO] eceb [ 41] 41 870 0 26641 389 920

Document.getElementsByClassName（）：返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）;它将仅返回具有给定类名的指定根元素的后代元素。

摘自： here

Answer 2

document.getElementsByClassName("subEmail")

上面的内容返回与数组具有相同类名的所有元素。您可能需要获取数组中的第一个元素，如

document.getElementsByClassName("subEmail")[0]

UPDATED FIDDLE

Answer 3

我建议传递调用了哪个事件的元素的引用。

HTML 的

public class Manager
{
    BasicErrorHandler _errorHandler;

    public Manager()
    {
        _errorHandler = new BasicErrorHandler();
    }

    public void MethodA()
    {
        DoWork( () => {
            // do something interesting here
        });
    }

    public void MethodB()
    {
        DoWork( () => {
            // do something else interesting here
        });  
    }

    private void DoWork(Action action)
    {
        try
        {
            action();
        }
        catch(Exception ex)
        {
            _errorHandler.ProcessException(ex);
        }
    }
}

脚本

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

function checkFilled(elem) {
    elem.style.backgroundColor = elem.value == "" ? "yellow" : "";
}

function checkFilled(elem) {
  elem.style.backgroundColor = elem.value == "" ? "yellow" : "";
}

window.onload = function() {
  checkFilled(document.getElementsByClassName("subEmail")[0]);
}

Answer 4

这是小提琴作品http://jsfiddle.net/2Xgfr/913/

function checkFilled() {
    var inputVals = document.getElementsByClassName("subEmail");

for(var i=0; i<inputVals.length;i++){
    if (inputVals[i].value == "") {
        inputVals[i].style.backgroundColor = "yellow";
    }
    else{
        inputVals[i].style.backgroundColor = "";
    }
    }
}

checkFilled();

和html

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

我使用了一个循环，所以你可以有多个字段。

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

4 个答案: