ReferenceError: button is not defined

Question

I have a simple bootstrap page. It is the beginning of a bigger projects for kids where I will be asking them to click on a button to start a quiz. I am not able to display the quiz using the Javascript: document.getElementById("message").innerHTML = "Quiz String";. I am trying to do that using addEventListener. I am not sure what went wrong. Here is my entire code:

<!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>

Possible duplicate of [Using an HTML button to call a JavaScript function](https://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function) — Madhawa Priyashantha, Mar 02 '19 at 19:57
You never assign anything to button, so it doesn't exist for you to add an event handler to it. — Jared Smith, Mar 02 '19 at 19:57

score 0 · Accepted Answer · answered Mar 02 '19 at 20:02

0

There is no button assigned an id of 'message'

Start Quiz

answered Mar 02 '19 at 20:02

Barri

44
4

David Cooper · Answer 2 · 2019-03-02T21:36:43.410

first need to get the reference of the button before add the event listener:

<!-- 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>

score 0 · Answer 3 · answered Mar 02 '19 at 20:11

Try this in the JS.

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

We are search for a button with the class 'button-info' and adding the event listener to it.

As you said It is a big project. You should never add event listener to the bootstrap classes which won't be unique in your code going forward. Use Id instead.

<button type="button" class="btn btn-info" id="btn-quiz-start">Start Quiz</button>
 var submitButton = document.querySelector('#btn-quiz-start');

ReferenceError: button is not defined

3 Answers3