需要帮助的JavaScript增添类

这是我的代码：需要帮助的JavaScript增添类

<form> 
<input type="text" id="username" onblur="class();" name="username"> 
</form> 
<script> 
    function class() { 
     var username = document.getElementById('username'); 
     if (username == "") { 
      //Now here I want to add a class 
     } 
    } 
</script>

现在我想的时候不会给出用户名值添加类。我怎样才能做到这一点？

来源

2015-10-19 Samiul Haque Sohan

'用户名== “”'是不正确的，因为一个元素不能为空字符串。 – Xufox

你的意思是说'input'是空的？ –

注意：你不能在函数声明中使用'class'作为函数的名字（你上面有什么），因为名字必须有* Identifier *，* Identifier *是* * IdentifierName *而不是* ReservedWord *”。 'class'是一个保留字（他们实际上是在ES2015中开始做的）。 –

与您的代码的主要问题是：

您使用class其中一个标识符预期，但不能使用class作为标识符，因为它是一个保留字。
你得到元素为username字段，而不是它的值。

听起来好像你想要在blur事件中添加一个类到失去焦点的元素。如果是这样，用你的代码改变最小，您：

使用的功能不同的名称，如function class() { ... }是无效的，class是一个保留字。
通过this进入您的函数onblur。
为你的函数声明一个elm参数（无论你想要什么名字）。
将课程添加到elm.classList（在现代浏览器上）或element.className（用于最大兼容性）。

例子：

function checkUserName(elm) { 
 
    var username = elm.value; // Or ... this.value.trim(); 
 
    if (!username) { 
 
    elm.className += " no-name"; 
 
    } else { 
 
    elm.className = elm.className.replace(/\bno-name\b/, ''); 
 
    } 
 
}

.no-name { 
 
    background-color: yellow; 
 
    border: 1px solid red; 
 
}

<form> 
 
    <input type="text" id="username" onblur="checkUserName(this);" name="username"> 
 
</form>

说了这么多，我不会用老式onxyz属性可言。相反，我会用现代的事件处理：

document.getElementById("username").addEventListener("blur", function(e) { 
 
    var username = this.value; // Or ... this.value.trim(); 
 
    if (!username) { 
 
    this.className += " no-name"; 
 
    } else { 
 
    this.className = this.className.replace(/\bno-name\b/, ''); 
 
    } 
 
}, false);

.no-name { 
 
    background-color: yellow; 
 
    border: 1px solid red; 
 
}

<form> 
 
    <input type="text" id="username" onblur="checkUserName(this);" name="username"> 
 
</form>

来源

2015-10-19 16:30:20

感谢您的帮助:) –

-1

var username = document.getElementById('username').value 

if (username == "") { 
    document.getElementById('username').className += " someClass"; 
}

来源

2015-10-19 16:30:51 SoluableNonagon

需要帮助的JavaScript增添类

回答

相关问题