如何檢查 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