Question

这是我的代码：

<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>

现在我想在没有给出用户名值时添加类。我怎么能这样做？

Answer 1

您的代码的主要问题是：

您正在使用class，其中需要标识符，但您无法使用class作为标识符，因为它是＆＃39保留字。
您正在获取username字段的元素，而不是其值。

听起来你想在blur事件上添加一个类，使其失去焦点。如果是这样，只需对代码进行最少的更改，即可：

为该功能使用其他名称，因为function class() { ... }无效，class是保留字。
将this传递到onblur中的函数。
为您的函数声明一个elm参数（无论您想要什么名称）。
将课程添加到elm.classList（在现代浏览器上）或element.className（以获得最大兼容性）。

示例：

＆＃13;

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/, '');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

话虽如此，我根本不会使用老式的onxyz属性。相反，我使用现代事件处理：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

在javascript中需要帮助才能添加课程

2 个答案: