未触发 JavaScript 事件

Question

Once #theButton is clicked, an alert should be triggered.单击#theButton ，应触发警报。 Why aren't any of the events being triggered using the following methods?为什么使用以下方法没有触发任何事件？

            var theButton = document.getElementById("theButton");
       
            theButton.onclick = function(){alert("Clicked!");}
            theButton.onclick = clickAlert;
            theButton.onclick(alert("Clicked!"));
    
            function clickAlert(){
                alert("Clicked!");
            }
        </script>
    </head>
    <body>
        <input type="button" id="theButton">
    </body>
</html>

Answer 1

You have three problems你有三个问题

You misspell function on line 7. (This generates a runtime error, by the way)您在第 7 行拼错了function 。（顺便说一下，这会产生运行时错误）
You try to access the node #theButton before it's available in the DOM.您尝试在节点 #theButton 在 DOM 中可用之前访问它。 Take Pekka's advice for this one听听 Pekka 的建议
You overwrite the onclick property on line 8 - not sure if you're doing that on purpose or what您覆盖了第 8 行的onclick属性 - 不确定您是故意这样做还是什么

Answer 2

Because theButton doesn't exist yet when you run your script?因为当您运行脚本时theButton还不存在？

Wrap it into the body's onload event or jQuery's ready() .将它包装到主体的onload事件或 jQuery 的ready() 。

Answer 3

尝试将其包装在 document.Ready() 函数中。

Answer 4

我喜欢jQuery.ready()答案，但我相信您也可以将<script>块移动到某个点，就像在页面末尾一样取消按钮。

Answer 5

It works if you put the onclick within the input tag (and spell things right):如果您将 onclick 放在输入标签中（并且拼写正确），它会起作用：

<html>
     <head>
      <script type="text/javascript" language="javascript">



       function clickAlert(){
        alert("Clicked!");       

       }

      </script>
     </head>
     <body>
      <input type="button" id="theButton" NAME="theButton" onclick="clickAlert()">
     </body>
    </html>

未触发 JavaScript 事件

问题描述

5 个解决方案

解决方案1
2 已采纳 2010-06-18 20:31:44

解决方案2
1 2010-06-18 20:26:39

解决方案3
1 2010-06-18 20:29:08

解决方案4
1 2010-06-18 20:33:14

解决方案5
1 2010-06-18 20:33:37

未触发 JavaScript 事件

问题描述

5 个解决方案

解决方案1 2 已采纳 2010-06-18 20:31:44

解决方案2 1 2010-06-18 20:26:39

解决方案3 1 2010-06-18 20:29:08

解决方案4 1 2010-06-18 20:33:14

解决方案5 1 2010-06-18 20:33:37

解决方案1
2 已采纳 2010-06-18 20:31:44

解决方案2
1 2010-06-18 20:26:39

解决方案3
1 2010-06-18 20:29:08

解决方案4
1 2010-06-18 20:33:14

解决方案5
1 2010-06-18 20:33:37