Question

我有一个简单的引导页面。这是针对儿童的更大项目的开始，我将要求他们单击按钮来开始测验。我无法使用Java脚本显示测验：document.getElementById（“ message”）。innerHTML =“测验字符串”;。我正在尝试使用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>

Answer 1

没有为按钮分配ID为“ message”的消息

开始测验

Answer 2

在添加事件侦听器之前，首先需要获取按钮的引用：

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

Answer 3

在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');

ReferenceError：未定义按钮

3 个答案: