用于在Javascript中检查表单验证的简单按钮

时间:2014-04-04 16:36:04

标签: javascript html css forms

我只是想创建一个简单的按钮来检查输入字段是否为空并相应地设置它。我觉得这应该很简单,但我只是遗漏了一些东西。

<input id="text"></input>
<button id="button">check</button>
<script>
var text = document.getElementById('text');
var button = document.getElementById('button');

function checker() {
   if (text.value === "") {
    text.style.cssText = "background:red;";
    return false;
   }
   else {
       text.style.cssText = "background:green;";
   }
}

button.addEventListener("click", checker(), false);
</script>

这是我用来尝试让它发挥作用的jsfiddle的链接。

Link

2 个答案:

答案 0 :(得分:5)

您实际上是在调用函数并传递结果,而不是传递对checker()函数的引用。

你想要做的是传递对这个函数的引用......

button.addEventListener("click", checker, false);

请注意缺少()

答案 1 :(得分:4)

您需要通过引用传递函数:

button.addEventListener("click", checker, false);

注意:您也可以传递匿名函数:

button.addEventListener("click", function(){checker();}, false);