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

Question

我使用的是一个引导按钮类，当单击该按钮时，我会将this.id发送到javascript函数carteToggle((。因为我有多个引导按钮，我想切换插入符号，我尝试了下面显示的方法，但我收到了这个错误：

编辑：

我也在使用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

CDNS:

<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");