Flask/jinja2/JavaScript/HTML/Bootstrap TypeError：无法读取 null 的属性“classList”

Question

我正在使用引导按钮类，当单击按钮时，我将 this.id 发送到 javascript 函数 caretToggle()。 因为我有多个引导程序按钮，所以我想切换插入符号，我尝试了下面显示的方法，但收到此错误：

编辑：

我也在使用flask并使用jinja2语法链接JavaSript文件，如下所示：

<script src="{{ url_for('static', filename='js/caretToggle.js') }}"></script>

当我评论链接文件的方式并将javascript放在html正文的脚本标签中时，代码按预期工作。

奇怪的部分是代码都按预期工作，直到我添加了第二个按钮。

我的偏好是将所有 javascript 保存在一个文件中，谁能帮我解决这个问题？

结束编辑

错误：

caretToggle.js:3 Uncaught TypeError: Cannot read property 'classList' of null

域名解析：

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css"
  integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN"
  crossorigin="anonymous"
/>

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
  crossorigin="anonymous"
></script>

HTML 片段：

<div id="caretToggleMh">
    <button 
      id="mH" 
      class="btn btn-block btn-primary m-2 dropdown-toggle" 
      type="button" data-toggle="collapse" 
      data-target="#major-holders" 
      aria-expanded="false" 
      aria-controls="collapseExample" 
      onmousedown="caretToggle(this.id)">
      Major Holders
    </button>
</div>
<div id="caretToggleIh">
  <button 
    id="iH" 
    class="btn btn-block btn-primary m-2 dropdown-toggle"
    type="button" data-toggle="collapse" 
    data-target="#collapseExample" 
    aria-expanded="false" 
    aria-controls="collapseExample"  
    onmousedown="caretToggle(this.id)">
   Institutional Holders
  </button>
</div>

Javascript 片段：

function caretToggle(clicked_id) {
    if (clicked_id == "mH") {
        console.log(clicked_id);
        var caretElement = document.getElementById("caretToggleMh");
        caretElement.classList.toggle("dropup");
        console.log("class attribute contains: ", caretElement.className);
    } else if (clicked_id == "iH") {
        console.log(clicked_id);
        var caretElement = document.getElementById("caretToggleiH");
        caretElement.classList.toggle("dropup");
        console.log("class attribute contains: ", caretElement.className);
    }
}

Answer 1

您在元素 id 中有一个错字。 尝试这个：

var caretElement = document.getElementById("caretToggleIh");