为什么我的 JavaScript 仍然先于 HTML 加载？

问题描述 投票：0回答：1

我已经尝试了所有推荐的解决方案：将我的脚本移到 

<body>
元素之后；在关闭 
<body>
标签之前插入；将我所有的 JS 代码包装在 
document.addEventListener("DOMContentLoaded", function () {})
中，但我仍然收到以下错误：

未捕获类型错误：无法读取 null 的属性（读取“addEventListener”） 在 HTML 文档中。 （脚本.js：245：9） （匿名）@script.js：245

我还做错了什么？目前，我的 JS/HTML 如下：

JS

document.addEventListener("DOMContentLoaded", function () {
/* LAYOUT.HTML */
  console.log("Welcome to my JavaScript!");
...
};

HTML

...
  <div class="flex-1">
  {% block body %}{% endblock %}
  </div>

      <div class="space-y-1 w-full">
        <div class="bg-white w-full xyz-in" style="height: 1px" xyz="right-100% duration-10"></div>
        <div class="bg-white w-full xyz-in" style="height: 2px" xyz="right-100% duration-20"></div>
        <div class="bg-white w-full xyz-in" style="height: 3px" xyz="right-100% duration-30"></div>
        <div class="flex relative bg-white w-full h-24 items-center justify-center">
          <img src="{{url_for('static', filename='img/logo.png')}}" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-20 object-contain"></img>
        </div>
      </div>
      <script src="{{url_for('static', filename='js/script.js')}}"></script>
  </body>
 
</html>

JS 代码创建错误

// First Name & Last Name Validation
  let ABC = /^[A-Za-z]+$/;

  let fname = document.getElementById("fname");

  fname.addEventListener("input", () => ABCvalidate(fname));

  let lname = document.getElementById("lname");

  lname.addEventListener("input", () => ABCvalidate(lname));

  function ABCvalidate(name) {
    const errorElement = document.getElementById("CSerror");
    if (!ABC.test(name.value)) {
      errorElement.innerHTML =
        "No spaces, numbers, or special characters allowed";
    } else {
      errorElement.innerHTML = "";
    }
  }

在 {% block body %} 中扩展 HTML，包含我的元素

<form action="/register" method="post">
  <div
    class="bg-white border-4 border-solid border-gray-300 rounded-md w-2/3 mx-auto mb-4 px-2 py-2 md:w-1/4"
  >
    <label for="fname" class="font-bold">First Name</label>
    <input
      type="input"
      placeholder="Enter your first name..."
      id="fname"
      name="fname"
      required
      class="placeholder-gray-500 border-2 border-solid border-gray-300 bg-gray-200 rounded-md w-full pl-1 mb-2"
    />

    <label for="lname" class="font-bold">Last Name</label>
    <input
      type="input"
      placeholder="Enter your last name..."
      id="lname"
      name="lname"
      required
      class="placeholder-gray-500 border-2 border-solid border-gray-300 bg-gray-200 rounded-md w-full pl-1 mb-2"
    />
javascript html dom
1个回答
0
投票

全部，

我了解到这个问题与我在运行 

.getElementbyId()
方法时加载的 HTML 页面有关；因为我没有加载与 JS 相对应的适当的 HTML 页面，所以我的代码无法找到该元素。

我错误地认为 

document.getElementbyId()
会扫描您网站的所有 HTML 页面，因此需要 - 我进一步了解到，只要这些元素位于不同的页面上，您就可以对不同的元素使用相同的 ID。

请参阅下文了解更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.