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

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

javascript

如何检查JavaScript/Flask中是否存在多个元素,javascript,Javascript,我有一个带有按钮点击事件监听器的js文件。问题是这些按钮在flask发送数据之前不存在。我只想在元素存在或元素存在时运行侦听器我正在尝试解决出现的此错误： Uncaught TypeError: Cannot read property 'addEventListener' of null HTML文件： <html> <body> {% if var %} <div> <h1>Hello {{va

我有一个带有按钮点击事件监听器的js文件。问题是这些按钮在flask发送数据之前不存在。我只想在元素存在或元素存在时运行侦听器

我正在尝试解决出现的此错误：

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>

使用on-script，一种脚本，当页面继续解析时，该脚本一可用就会异步运行。

它需要等待并在为document.getElementById（）加载页面后运行

尝试按如下方式更新：

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

或者您可以删除脚本标记上的async属性

编辑：

检查

{%if var%}

在您的上下文中是否为true

我认为这与javascript无关。html标记（元素）不是由flask view engine根据if条件创建的

您可以检查与您的不同之处

我尝试了使用和不使用async的这种方法，并尝试删除async，但都不起作用。谢谢你的帮助。@goosegoose那么你检查过

{%if var%}

是真的吗？是的。我可以通过将脚本标记放在{%if var%}块中来解决这个错误，但我正在寻找一个javascript解决方案。@goosegoose我认为这与javascript无关。html标记（元素）不是由flask视图引擎创建的。你可以看看有什么不同于你的。

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