使用DOMContentLoaded的Javascript作为需要的多个html文件

Question

我有一些javascript，当添加到HTML文件的末尾时，它可以很好地运行。然而，我需要在多个html文件上使用相同的脚本，所以尝试将其添加到js文件中。所有的链接都很好，因为我已经添加了其他功能。文档建议将DOMContentLoaded与readystate函数一起使用。它打印if语句中的第一个console.log和"打印加载"，然后停止。有人能帮忙吗？

function addbutton(){
let cartbutton = document.getElementsByName('ropebutton');
console.log(cartbutton) // prints node []
const cart = [];

for(var i = 0; i < cartbutton.length; i++) {
let button = cartbutton[i];
console.log(button);
button.addEventListener('click', (event) => {
console.clear();
console.log(event.target);
console.log(event.target.dataset.test);
cart.push(event.target.dataset.test);
console.log(cart)            
});
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addbutton);
console.log("print loading");
} else {
addbutton();
console.log("print loaded");
}

Answer 1

只需将defer属性添加到样式标记<script src="URL" defer></script>，即可异步加载脚本，但脚本将在加载所有DOMContent后等待执行。