时间戳

首页 > 解决方案 > ReferenceError：未定义按钮

javascript - ReferenceError：未定义按钮

问题描述

我有一个简单的引导页面。这是一个更大的孩子项目的开始，我将要求他们点击一个按钮来开始一个测验。我无法使用 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>

标签： javascripthtmltwitter-bootstrapfunctionbutton

解决方案

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

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

推荐阅读