ReferenceError: кнопка не определена - PullRequest
Новая
       0

ReferenceError: кнопка не определена

0 голосов
/ 02 марта 2019

У меня есть простая страница начальной загрузки.Это начало больших проектов для детей, где я буду просить их нажать на кнопку, чтобы начать тест.Я не могу отобразить тест, используя Javascript: document.getElementById ("message"). InnerHTML = "Quiz String" ;.Я пытаюсь сделать это с помощью addEventListener.Я не уверен, что пошло не так.Вот весь мой код: 

<!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">
<title>Quiz Page.</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet">
<style>
.TopDivMarg {
margin-bottom: 50px;
}
</style>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-md-12 TopDivMarg"></div>
</div>

<!--    Quiz Group  -->
<div class="row">
<div class="col-xl-4"></div>
<div class="col-xl-4">
  <p id="message" class="text-center">Click Button to Start Quiz.</p>
</div>
<div class="col-xl-4"></div>
</div>

<!--    Button Group  -->
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
  <button type="button" class="btn btn-info">Start Quiz</button>
</div>
<div class="col-md-4"></div>
</div>

<script>
button.addEventListener("click", 
 function (changeText){ 
document.getElementById("message").innerHTML = "What are the colors of the rainbow?";   
});
</script>

Ответы [ 3 ]

0 голосов
/ 02 марта 2019

сначала нужно получить ссылку на кнопку, прежде чем добавить прослушиватель событий: 

<!-- Button Group -->
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <button id="button" type="button" class="btn btn-info">Start Quiz</button>
  </div>
  <div class="col-md-4"></div>
</div>

<script>
  const button = document.getElementById("button");
  button.addEventListener("click", function(changeText){
    document.getElementById("message").innerHTML =
      "What are the colors of the rainbow?";
  });
</script>
0 голосов
/ 02 марта 2019

Попробуйте это в JS. 

var submitButton = document.querySelector('.btn-info');
submitButton.addEventListener("click", function (changeText) {
    document.getElementById("message").innerHTML = "What are the colors of the rainbow?";
});

Мы ищем кнопку с классом 'button-info' и добавляем к ней прослушиватель событий.

Как вы сказалиэто большой проект.Вы никогда не должны добавлять прослушиватель событий в классы начальной загрузки, которые не будут уникальными в вашем коде.Вместо этого используйте Id. 

<button type="button" class="btn btn-info" id="btn-quiz-start">Start Quiz</button>
 var submitButton = document.querySelector('#btn-quiz-start');
0 голосов
/ 02 марта 2019

Нет кнопки с назначенным идентификатором 'message'

Start Quiz

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...