Question

我已经声明了所有变量，然后相应地存储了所有元素。

然后我声明了两个函数。

最后，我创建了两个事件侦听器，其中我创建的两个函数已作为回调传递。

虽然我似乎遵循了所有正确的步骤，但我无法确定控制台抛出的原因：“未捕获的类型错误：无法读取 index.js:32 处的 null 属性‘addEventListener’”。

如果你能指出我犯的错误，那就太好了。

var elForm, elSelectPackage, elPackageHint, elTerms, elTermsHint;

elForm = document.getElementById("formSignUp");
elSelectPackage = document.getElementById("package");
elPackageHint = document.getElementById("packageHint");
elTerms = document.getElementById("terms");
elTermsHint = document.getElementById("termsHint");

function packageHint(){
  var package = this.options[this.selectedIndex].value;
  if(package === "Monday") {
    elPackageHint.innerHTML = "You get 10% off";
  } else {
    elPackageHint.innerHTML = "Wise choice"
  }
}

function checkTerms(event) {
  if (!elTerms.checked) {
    elTermsHint.innerHTML = "you must agree to term & conditions"
    event.preventDefault();
  }
}

elForm.addEventListener('submit', checkTerms, false);
elSelectPackage.addEventListener("change", packageHint, false);

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Practise App</title>
    <link rel="stylesheet" href="index.css">
  </head>


  <body>
    <h1 id="packageHint"></h1>
    <form method="post" id="formSignUp" action="http://www.example.org/register">
      <select class="package" name="">
        <option value="">Monday</option>
        <option value="">Tuesday</option>
        <option value="">Wednesday</option>
      </select><br>
    </form>
    <input id="terms" type="checkbox" name="" value="">
    <div>check to agree terms and conditions</div>
    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

Answer 1

因为你这样做： elSelectPackage = document.getElementById("package"); 但是 package 是一个类，而不是一个 ID

为什么控制台会抛出“无法读取 null 的属性‘addEventListener’”？

1 个答案: