如何在JS中将输入框值存入变量？遇[object HTMLInputElement]报错

问题核心 #

你当前用document.getElementById('userName')获取到的是输入框的DOM元素对象，而非用户输入的内容，所以alert时会显示[object HTMLInputElement]。要拿到输入值，必须访问元素的.value属性。

另外你的HTML里有个细节错误：<label>标签的for属性值不需要加#，直接写对应input的id即可，否则点击label无法正确聚焦到输入框。

修正后的代码 #

JavaScript代码 #

function userSubmit() {
    let username = document.getElementById('userName').value;
    let password = document.getElementById('passWord').value;

    alert(username);
}

HTML代码（修正label部分） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
    <title>B.O.M - Create Account</title>
</head>
<body>
    <header>
        <h1 class="heading">Welcome to Bank of Maharashtra.</h1>
    </header>

    <div class="container">
        <h1 class="sub-heading">Create your account -</h1>

        <div class="sub-container">
            <label for="userName">Username:</label>
            <input type="text" name="" id="userName">
            <br>
            <label for="passWord">Password:</label>
            <input type="password" name="" id="passWord">
            <br>
            <input onclick="userSubmit()" type="submit" value="Confirm" id="confirm">
        </div>

        <img class="logo" src="bank_img3.webp" alt="" srcset="">
    </div>

    <script src="script.js"></script>
</body>
</html>

关键说明 #

• 添加.value后，变量username和password会存储用户输入的文本内容，而非DOM元素对象。
• 修正label的for属性后，点击"Username:"或"Password:"文字时，对应的输入框会自动获得焦点，优化交互体验。

内容的提问来源于stack exchange，提问作者Shardul Bhatkar