如何使用窗口加载函数使我所有的 javascript 都外部化

How do I make all my javascript external with the window onload function?

本文关键字：javascript 外部化 窗口 何使用 加载 函数      更新时间：2023-09-26

我正在尝试使我所有的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>

您必须等待 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>

相关文章：