-2
votes

RéférenceError: le bouton n'est pas défini

J'ai une page de bootstrap simple. C'est le début d'un plus grand projet pour les enfants où je vais leur demander de cliquer sur un bouton pour lancer un quiz. Je ne suis pas capable d'afficher le questionnaire à l'aide du JavaScript: documenter.getelementByID ("message"). Innerhtml = "String Quiz"; J'essaie de le faire à l'aide d'AddeventListener. Je ne suis pas sûr de ce qui s'est mal passé. Voici mon ensemble de 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>

javascript html function button twitter-bootstrap

2 commentaires

Dupliqué possible de Utilisation d'un bouton HTML pour appeler une fonction JavaScript

Vous n'abandonnez jamais rien au bouton, il n'existe donc pas pour vous d'ajouter un gestionnaire d'événements à celui-ci.

3 Réponses :

0
votes

Il n'y a pas de bouton attribué à un identifiant de "message"

START QUIZ

0 commentaires

0
votes

Avant d'ajouter le bouton avant d'ajouter l'écouteur d'événement:

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

0
votes

Essayez ceci dans le JS.

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

0 commentaires