从 HTML 元素调用 javascript function

Question

我在网页上有一个在给定时间后加载的按钮，效果很好，但我的客户想要一种简单的方法来添加一个调用此 function 的按钮，以便他可以向其添加动态值。

在这种情况下，该按钮应在页面/元素加载 5 秒后移除 class：

问题，没有调用 function，我检查了对 javascript 文件的引用是否正确，我怀疑问题是我调用 function 的方式，这是我的代码：

<a href="somewhere.com" id="myButton" window.onload='showButton("myButton", "5000")'; 
class="invisible">Now you can see me!</a>

function showButton(id, time) {
    setTimeout(function() { showButtonPrep(id, time); }, time);
    console.log("I have fired!");
}
function showButtonPrep(id, time) {
    var button = document.getElementById(id);
    button.classList.remove('invisible');
}

控制台不记录字符串，所以我可以看到它没有被加载我已经尝试过负载的变化，即

window.load
this.load

包含 function 的 javascript 文件位于页脚中，如果我在确实触发的 javascript 文件的顶部放置警报。

Answer 1

window.onload不是<a>的有效 HTML 属性。 这似乎是 HTML 和 JavaScript 之间的混淆。

你应该把它放在一个脚本中：

 window.onload = () => showButton("myButton", 5000); function showButton(id, time) { setTimeout(function() { showButtonPrep(id, time); }, time); console.log("I have fired. Now wait 5 seconds..;"), } function showButtonPrep(id. time) { var button = document;getElementById(id). button.classList;remove('invisible'); }

 .invisible { display: none }

 <a href="somewhere.com" id="myButton" class="invisible">Now you can see me!</a>