为什么我会收到“无法设置未定义的属性 'border'”错误？

Question

我在 JavaScript 代码的第 6 行收到“无法设置未定义的属性‘边界’”错误。 我希望能够更改用户名文本框的 CSS 以便边框颜色不同。 我该如何解决这个问题？

HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>Login Screen</title>
        <link rel="stylesheet" type="text/css" href="login.css"/>
        <script src="login.js"></script>
    </head>

    <body>
        <div id="container">
            <h1 onclick="loginDetails()">Login</h1>
            <form onsubmit="return validateLogin()">
                <label for="username" class="label-1">Username</label><br>
                <input type="text" id="username" class="text-box"><br>
                <label for="password" class="label-2">Password</label><br>
                <input type="text" id="password" class="text-box"><br>
                <button type="submit" id="login" class="button">Sign In</button>
            </form>
        </div>
    </body>
</html>

CSS：

#username {
    border: 1px solid gray;
}

JavaScript：

function validateLogin() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username.length < 5) {
        username.style.border = "1px solid red";
        return false;
    }
}

Answer 1

您正在尝试在输入字段的值上设置 CSS 属性。

用。。。来代替：

function validateLogin() {
    var username = document.getElementById("username");
    var password = document.getElementById("password");

    if (username.value.length < 5) {
        username.style.border = "1px solid red";
        return false;
    }
}

示例代码笔： https://codepen.io/jmitchell38488/pen/xxZOMoQ

为什么我会收到“无法设置未定义的属性 'border'”错误？

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-06-15 01:18:52

为什么我会收到“无法设置未定义的属性 'border'”错误？

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-06-15 01:18:52

解决方案1
3 已采纳 2020-06-15 01:18:52