在if语句中添加类

Add class in if statement

本文关键字：添加 语句 if      更新时间：2023-09-26

我正在编写一个输入站点，并希望突出显示空字段。我想用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功能，他们停止工作…任何帮助将非常感激!如果我描述的东西太模糊，请问，我会尽量澄清!

hi:

语法错误
});

^删除最后一个父项。

以后，打开你的浏览器控制台，检查像这样的错误——这会使调试更容易。

JSFiddle

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

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

在我看来，你有一个语法错误在你的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() .

根据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");
}

你也可以试试，

function hi() 
{
   if(document.getElementById('input1').value==="")
   {
      $('#input1').addClass('hi'); 
   }
}
相关文章：