How to save value of input in a variable in JS-CodePudding

I want to save the value of an input element in a variable. But it is returning me this - [object HTMLInputElement]

Here's my HTML -

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

<!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 >Welcome to Bank of Maharashtra.</h1>
        </header>
    
        <div >
            <h1 >Create your account -</h1>
    
            <div >
                <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  src="bank_img3.webp" alt="" srcset="">
        </div>
    
        <script src="script.js"></script>
    </body>
    </html>

I am not getting the username which i have typed in the input field. Please help me to solve this issue. Thanks

CodePudding user response：

This will log the input itself not it's value, you need to log input.value

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

    alert(username.value)
    alert(password.value)
}

<!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 >Welcome to Bank of Maharashtra.</h1>
    </header>

    <div >
        <h1 >Create your account -</h1>

        <div >
            <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  src="bank_img3.webp" alt="" srcset="">
    </div>

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

CodePudding user response：

[object HTMLInputElement] is just a string representation of your username object. {value: 'Users name'}

alert(JSON.stringify(username))

will give you an idea what you want to see.