如何使用window onload函数将所有JavaScript外部化？

Question

我试图将我的所有JavaScript外部化，包括“提交”按钮的onclick，我有一个注释掉的window.onload函数，我无法使用。 当我删除onclick="checkInput();" 从提交输入并取消注释脚本中的window.onload事件，我的表单不起作用。

有人可以解释一下我不熟悉JavaScript的错误吗。我提供了一个有效的代码段，但不是外部的，感谢您的指导。

 /*---------------------------------------------- css settings for HTML div exactCenter ------------------------------------------------*/ @import url(http://fonts.googleapis.com/css?family=Raleway); #main{ width:960px; margin:50px auto; font-family:raleway; } span{ color:black; font-weight:bold; } h2{ background-color: white; text-align:center; border-radius: 10px 10px 0 0; margin: -10px -40px; padding: 30px; } hr{ border:0; border-bottom:1px solid blue; margin: 10px -40px; margin-bottom: 30px; } #form_layout{ width:300px; float: left; border-radius: 10px; font-family:raleway; border: 2px solid #ccc; padding: 10px 40px 25px; margin-top: -2px; } input[type=text],input[type=password]{ width:99.5%; padding: 10px; margin-top: 8px; border: 1px solid #ccc; padding-left: 5px; font-size: 16px; font-family:raleway; } input[type=submit]{ width: 100%; background-color:#0467fc; color: white; border: 2px solid #0467fc; padding: 10px; font-size:20px; cursor:pointer; border-radius: 5px; margin-bottom: 15px; } a{ text-decoration:none; color: cornflowerblue; } i{ color: cornflowerblue; } p{ font-size:16px; font-weight:bold; color:red; }

 <!DOCTYPE html> <html> <head> <script> //window.on onload functionload = function() { //document.getElementById('submit').onclick = function(evt) { //checkInput(); //}//end onload onclick </script> </head> <body> <div id="main"> <div id="form_layout"> <h2>Palindrome Test</h2> <br>Enter a 10 character Palindrome. <!-- Form starts here--> <form name="pForm" id="pForm" method="post" > <label>Palindrome:</label>: <input type="text" name="uput" id="uput"/><br> <!-- ... all the other stuff ... --> </form><br> <input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br> <p><span id="eMsg" class="error"></span><p/><br> </div> </div> </body> </html>

 <!DOCTYPE html>
<html>
 <head>
    <title>isPalindrome</title>
        <script>
        //window.on onload functionload = function() {
        //document.getElementById('submit').onclick = function(evt) { 
        //checkInput();
        //}//end window.onload 


Palindrome(str);

</script>
 </head>
    <body>
   <div id="main">
   <div id="form_layout">
     <h2>Palindrome Test</h2>
     <br>Enter a 10 character Palindrome.
     <!-- Form starts here-->
     <form name="pForm" id="pForm" method="post" >
     <label>Palindrome:</label>: 
     <input type="text" name="uput" id="uput"/><br>      
     <!-- ... all the other stuff ... -->
    </form><br>
    <input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
    <p><span id="eMsg" class="error"></span><p/><br>
     </div>     
   </div>
 </body>
</html>

Answer 1

您必须等待DOM完成加载，然后才能查询它以查找DOM元素和atach事件。

最简单的解决方法是将<script>放在正文的末尾。
另一个解决方法是将处理程序附加到窗口onload事件中（这就是下面的代码段中的工作方式）

在所提供的代码段中，不清楚window.onload的附加方式。 同样在脚本表达式的末尾Palindrome(str); 由于未定义var str引发错误，所以我已修复它。

请参见下面的工作片段：

document.getElementById('submit').onclick = function(evt) { 
    checkInput();
}

 <!DOCTYPE html> <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById('submit').onclick = function(evt) { checkInput(); };}; function checkInput() { alert('Check input fired'); }//end check input </script> </head> <body> <div id="main"> <div id="form_layout"> <h2>Palindrome Test</h2> <br>Enter a 10 character Palindrome. <!-- Form starts here--> <form name="pForm" id="pForm" method="post" > <label>Palindrome:</label>: <input type="text" name="uput" id="uput"/><br> <!-- ... all the other stuff ... --> </form><br> <input type='submit' id="submit" value="Check Palindrome" /><br> <p><span id="eMsg" class="error"></span><p/><br> </div> </div> </body> </html>

如何使用window onload函数将所有JavaScript外部化？

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-03-13 01:25:54

如何使用window onload函数将所有JavaScript外部化？

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-03-13 01:25:54

解决方案1
3 已采纳 2016-03-13 01:25:54