Question

我试图将我的脚本和样式与我的标记分开，但我似乎无法摆脱onclick属性。通过我在Google和StackOverflow上完成的所有搜索，此脚本应该可以正常运行。如何使onclick事件与我的标记完全分开？

<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('guest_button').onclick = function () {
    document.write('You\'re a guest!');
}
</script>
<title>Test</title>
</head>

<body>
  <div id="prompt-container">
    <form>
      <input id="guest_button" type="button" value="Guest">
        <input type="button" value="Login">
        <input type="button" value="Sign Up">
      </form>
    <div id="test"></div>
  </div>
</body>
</html>

Answer 1

您必须等到您要定位的DOM元素已加载，然后才能向其附加事件。最简单的方法是在相关HTML之后移动脚本标记。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>

<body>
  <div id="prompt-container">
    <form>
      <input id="guest_button" type="button" value="Guest">
        <input type="button" value="Login">
        <input type="button" value="Sign Up">
      </form>
    <div id="test"></div>
  </div>
<script>
document.getElementById('guest_button').addEventListener("click", function () {
    alert('You\'re a guest!');
});
</script>
</body>
</html>

注意，我还将代码切换为使用addEventListener()并切换为alert()，因为document.write()文档加载后将清除您的文档。

有关在尝试操作DOM之前等待加载DOM的更多信息，请准备好以下答案：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

为什么没有调用此函数？

1 个答案: