Блог

Главная - Вопросы по программированию - Не удается запустить оповещение javascript при нажатии кнопки

Не удается запустить оповещение javascript при нажатии кнопки

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в html, CSS и JSS, и я пытаюсь создать простое оповещение при нажатии кнопки, чтобы протестировать некоторые концепции. Я создал простую контактную форму с дизайном начальной загрузки, и я просто хотел бы создать оповещение, отображающее содержимое сообщения при нажатии кнопки «отправить». Я записал некоторый код, однако предупреждение не отображается onclick.

Вот мой код html-файла:

 <h1 class="animate__animated animate__backInLeft">Contact me</h1>
                <div class="barwrapper">
                    <div class="bar animate__animated animate__backInLeft animate__slow"></div>
                </div>
                <h2>Email</h2>
                <div class="mb-3">
                    <input type="email" class="form-control" id="email" placeholder="name@example.com">
                </div>
                <h2>Message</h2>
                <div class="mb-3">
                    <input class="form-control" id="message" rows="3">
                </div>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button  onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
                    </div>

И вот мой код файла js:

 function getInputValue()
{
    var inputVal = document.getElementById('#message').Value;

    alert(inputVal)
}

Кажется, что мой js-файл правильно связан с моим html-файлом :

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

Есть идеи?

Комментарии:

1. var inputVal = document.getElementById('#message').Value; было бы var inputVal = document.getElementById('message').Value;

2. И .value со строчной буквы V.

3. Используйте консоль разработчика… Узнайте, что случай имеет значение….

4. Большое спасибо, я получил рабочий код. Должным образом отмечено для консоли разработчика, я постараюсь потратить некоторое время на учебные пособия.

Ответ №1:

Для getElementById требуется только строка идентификатора документа, без #

 function getInputValue()
{
    var inputVal = document.getElementById('message').value;
    alert(inputVal)
}

Ответ №2:

Вы очень близки, вам нужно объявить свою переменную следующим образом:

 var inputVal = document.getElementById('message');

Смотрите фрагмент ниже:

 var inputVal = document.getElementById('message');

function getInputValue() {
  alert(inputVal.value)
} 
 <h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
  <div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
  <input class="form-control" id="message" rows="3"></input>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>

Комментарии:

1. Похоже, что на моей HTML-странице он по-прежнему не работает (очевидно, работает здесь, в фрагменте). Когда я запускаю: var inputVal = document.getElementById('message'); function getInputValue() { alert(inputVal.value) } я не получаю предупреждения. Однако, когда я запускаю: var inputVal = document.getElementById('message').value; function getInputValue() { alert(inputVal) } я получаю «неопределенное» предупреждение.

2. Код ожидает, что во входных данных будет введено значение message . Если сообщение пустое, оповещение будет пустым. Кроме того, я не уверен, как выглядит ваша локальная среда, но убедитесь, что вы вызываете свое <script></script> право перед закрывающим </body> тегом в вашем HTML.

3. Итак, после игры с кодом я последовал вашему совету и поместил скрипт в html-код прямо перед закрытием </body> , и это сработало. До сих пор не знаю, почему он не работает, когда я связываю файл js, но, по крайней мере, я могу двигаться дальше, так что большое спасибо! Обучение программированию намного сложнее, чем кажется 😅

4. Причина, по которой он работает при предварительном запуске скрипта </body> , заключается в том, что он будет ждать загрузки остальной части документа перед запуском скрипта. — Он также должен работать с вашим внешним файлом javascript, однако вам просто нужно убедиться, что вы правильно вызываете путь к файлу.

5. Извините за это, я думал, что правильно пометил ваш (также новый в stackoverflow), просто изменил его на ваш (надеюсь, он обновится). Ценю руководство.

Ответ №3:

Index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="animate__animated animate__backInLeft">Contact me</h1>
    <div class="barwrapper">
        <div class="bar animate__animated animate__backInLeft animate__slow"></div>
    </div>

    <h2>Email</h2>
    <div class="mb-3">
        <input type="email" class="form-control" id="email" placeholder="name@example.com">
    </div>

    <h2>Message</h2>
    <div class="mb-3">
        <input class="form-control" id="message" rows="3">
    </div>

    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button  onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
    </div>
</body>
<script src="index.js"></script>
</html>

Index.js:

 function getInputValue()
{
    var inputVal = document.getElementById('message').value;

    alert(inputVal)
}