Осторожно новичок! Попытки внедрения JS кода в структуру сайта

@Devilz · Регистрация: 01.10.2017

Author24 — интернет-сервис помощи студентам

Всем привет. Нужна консультация.
Есть текстовое поле, в котором введённые данные отобразятся alert-ом после нажатия кнопки.
Но почему то выскакивает ошибка на 10 строке, ссылаясь на то, что value пуст.
Что не так?

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Личный сайт</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/favicon.png" type="image/x-icon">
    <script type="text/javascript">
      function sayHello(){
        var userUnswer1 = document.getElementById('userUnswer1').value;
        alert(userUnswer1);
      }
    </script>
</head>
<body>
<div id="content">
    <div id="header">
        <a href="index.html">Главная</a>/
        <a href="index.html">Загадки</a>/
    </div>
    <div id="center">
        <div id="box">
          <h5> Загадки</h5>
          <p>
              Зимой и летом одним цветом?
          </p>
          <input type="text" id="userAnswer1"><br><br>
          <a href="#" onclick="sayHello();">Отправить ответ</a>
          <div style="clear: both;"></div>
        </div>
    </div>
</div>
</body>
</html>

@Artmal · 01.10.2017, 15:50

Скрипт загружается и выполняется до построения DOM, т.к он находится в head.

Страница рендерится сверху вниз -> заходим в head -> загружаем и выполняем скрипт -> скрипт понятия не имеет что такое 'userAnswer1', потому что body еще не рендерилось, соотвественно объекта DOM еще нет.

Помещай скрипты перед закрытием тэга body.

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Личный сайт</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/favicon.png" type="image/x-icon">
</head>
<body>
<div id="content">
    <div id="header">
        <a href="index.html">Главная</a>/
        <a href="index.html">Загадки</a>/
    </div>
    <div id="center">
        <div id="box">
          <h5> Загадки</h5>
          <p>
              Зимой и летом одним цветом?
          </p>
          <input type="text" id="userAnswer1"><br><br>
          <a href="#" onclick="sayHello();">Отправить ответ</a>
          <div style="clear: both;"></div>
        </div>
    </div>
</div>
 
    <script type="text/javascript">
      function sayHello(){
        var userUnswer1 = document.getElementById('userAnswer1').value;
        alert(userUnswer1);
      }
    </script>
</body>
</html>

@Devilz · 01.10.2017, 18:02 **[ТС]**

Artmal, спасибо за развёрнутый ответ. Но я нашёл ошибку, неправильно задал id. В функции userAnswer, в инпуте userUnswer.

@Devilz 0 / 0 / 0 Регистрация: 01.10.2017 Сообщений: 3
	01.10.2017, 18:02 [ТС]	3
	Artmal, спасибо за развёрнутый ответ. Но я нашёл ошибку, неправильно задал id. В функции userAnswer, в инпуте userUnswer. 0