Получение ошибки «Uncaught TypeError: Cannot read property 'value' of null» при чтении значения ввода - PullRequest
0 голосов
/ 14 июля 2020

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 для ввода вашей информации, но я столкнулся с очень неприятной ошибкой.

Когда я нажимаю кнопку «Продолжить», я получаю сообщение об ошибке: «подсказка. js: 2 Uncaught TypeError: Невозможно прочитать свойство 'value' null в Continue (подсказка. js: 2) в HTMLButtonElement.onclick (prompt. html: 20) "

Любая помощь будет принята с благодарностью !!

1 Ответ

1 голос
/ 14 июля 2020

Попробуй ...

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...