如何检查 JavaScript/Flask 中是否存在多个元素

Question

我有一个带有按钮单击事件侦听器的 js 文件。 问题是这些按钮在烧瓶发送数据之前不存在。 如果元素存在或元素存在，我只想运行侦听器。

我正在尝试解决发生的此错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

HTML文件：

<html>
  <body>
    {% if var %}
        <div>
         <h1>Hello {{var}}</h1>
         <button id="1">Click me</button>
         <button id="2">Click me</button>
         <button id="3">Click me</button>
         <button id="4">Click me</button>
        </div>
    {% endif %}
    <script async src="{{ url_for('static', filename='js/buttons.js') }}"></script>
  </body>
<html>

JS文件：

var Btn1Element = document.getElementById("1");
var Btn2Element = document.getElementById("2");
var Btn3Element = document.getElementById("3");
var Btn4Element = document.getElementById("4");

Btn1Element.addEventListener(
  "click",
  () => {
      window.location = "/1";
  },
  false
);

Btn2Element.addEventListener(
  "click",
  () => {
      window.location = "/2";
  },
  false
);

Btn3Element.addEventListener(
  "click",
  () => {
      window.location = "/3";
  },
  false
);

Btn4Element.addEventListener(
  "click",
  () => {
      window.location = "/4";
  },
  false
);

Answer 1

使用脚本上的async 属性，当页面继续解析时，脚本将在可用时异步运行。

为document.getElementById()加载页面后需要等待并运行

尝试更新如下：

document.addEventListener("DOMContentLoaded", function() {
  // your js code on here
  var Btn1Element = document.getElementById("1");
  ...
});

或者您可以删除脚本标记上的异步属性。

编辑：

检查{% if var %}在您的上下文中是否为真。

我认为这与 javascript 无关。 html 标签（元素）不是由 Flask 视图引擎通过 if 条件创建的。

住在这里，你可以检查什么与你的不同

如何检查 JavaScript/Flask 中是否存在多个元素

问题描述

1 个解决方案

解决方案1
0 2020-10-08 02:22:33

如何检查 JavaScript/Flask 中是否存在多个元素

问题描述

1 个解决方案

解决方案1 0 2020-10-08 02:22:33

解决方案1
0 2020-10-08 02:22:33