Question

读取输入值时收到错误“Uncaught TypeError: Cannot read property 'value' of null”

2020-07-14

95

javascript html dom

Html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="prompt.css">
    

    <title>The Chat App</title>
</head>
<body>
    <div id="prompt">
        <h1>Please fill in the required information.</h1><br><br>

        <h2>Name that will be shown while chatting:</h2><br>

        <input type="text" placeholder="Enter name">
        <p id = "error label"></p><br>
       <button id = "button" onclick = "Continue();">CONTINUE</button>



    </div>
</body>
<script src = "prompt.js"></script>

</html>

Css 代码：

html{
    padding: 30px;
    text-align: center;
    font-family:  'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: linear-gradient(to right, orange,yellow );
}

#prompt{
    border-radius: 10px;
    background-color:white;
    padding: 17px;
    border:2px solid;
    margin-top: 115px;
    
    box-shadow: 5px 5px 8px  #535352;
}
h1{
    text-decoration: underline;
    font-size: 40px;
    
}
input{
    font-size: larger;
}
button{
    font-size: larger;
    padding:5px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: chartreuse;
    
}
button:focus{
    outline: 0;

}

Vanilla javascript 代码：

function Continue(){
    const inputValue = document.getElementById("input").value;
    console.log(inputValue);
}

我正在构建一个提示 html 页面来输入您的信息，但是我遇到了一个非常令人沮丧的错误。

当我单击继续按钮时，出现错误：“prompt.js:2 未捕获的 TypeError：无法在 HTMLButtonElement.onclick (prompt.html:20) 处的 Continue (prompt.js:2) 中读取属性‘value’为 null”

任何帮助都将不胜感激！！

Answer 1

试试这个...

function Continue(){
    const val = document.querySelector('input').value;
    console.log(val)
}

<h1>Please fill in the required information.</h1><br><br>

        <h2>Name that will be shown while chatting:</h2><br>

        <input type="text" placeholder="Enter name">
        <p id = "error label"></p><br>
       <button id = "button" onclick = "Continue()">CONTINUE</button>