Question

我正在编写输入网站并希望突出显示空字段。我想检查他们是否用if语句清空，然后添加突出显示它们的类。

我的代码：

JS：

var hi = function () 
{
   if(document.getElementById('input1').value==="")
   {
      $('#input1').addClass('hi'); 
   };
});

我把它变成了一个函数，所以我可以在html文件中调用它。

HTML：

<input type="text" name="firstname" class="ip" id="input1" placeholder="firstname">

调用js：

<input type="button" onclick="dcc (); pwc (); hi();" value="Submit" id="button">

不同的文件（js和html链接并正常工作）。

CSS：

.hi {
  border-color: red;
  border-width: 0.01em;
  margin-right: 15em;
  margin-top: 1.05em;
  float: right;
}

我的问题是：单击按钮时没有任何反应显示其他两个功能（警告告诉用户所选择的pw太短）但是当我链接hi功能时他们停止工作... 任何帮助将不胜感激！如果我描述的东西太模糊，请询问，我会尽力澄清！

Answer 1

hi中有语法错误：

});

^删除最后一个paren。

将来，打开浏览器的控制台并检查这样的错误 - 它使调试变得更加容易。

JSFiddle

或者，您可以使用事件处理程序：

$('#button').click(function () {
    console.log(document.getElementById('input1').value);
    if (document.getElementById('input1').value === "") {
        $('#input1').addClass('hi');
    };
});

Answer 2

我认为您的JS中存在语法错误。

var hi = function () { // cleaner to have the bracket here
   if(document.getElementById('input1').value==="") {
      $('#input1').addClass('hi'); 
   } // no semicolon
}; // no parenthesis

此外，不要使用document.getElementById('input1').value，而是使用jQuery，因为你拥有它！ $('#input1').val()。

Answer 3

根据OP的要求 -

这是您可以将console.log语句用于跟踪正在发生的事情的地方。

var hi = function () 
{
   console.log("'Hi' - Entering function");
   if(document.getElementById('input1').value==="")
   {
      console.log("'Hi' - Condition true - doing addClass");
      $('#input1').addClass('hi'); 
   };
   console.log("'Hi' - Leaving function");
}

现在，那说，我实际上做的事情更像是：

var hi = function () 
{
   console.log("'Hi1");
   if(document.getElementById('input1').value==="")
   {
      console.log("'Hi2");
      $('#input1').addClass('hi'); 
   };
    console.log("'Hi3");
}

Answer 4

您也可以尝试，

function hi() 
{
   if(document.getElementById('input1').value==="")
   {
      $('#input1').addClass('hi'); 
   }
}

在if语句中添加类

4 个答案: