CODEWITHSUNDEEP
javascript
Billy Payne
Billy Payne

Reputation: 99

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

I am trying to make all my JavaScript external including the onclick for the submit button, I have a commented out window.onload function that I can't get to work. When I remove the onclick="checkInput();" from the submit input and uncomment the window.onload event in the script , my form doesn't work.

Can someone explain what I am doing wrong besides being new to JavaScript.I have included a working snippet, just not external, thanks for any guidance.

/*----------------------------------------------
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>

Upvotes: 0

Views: 99

Answers (1)

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22061

You have to wait for the DOM to finish loading before you can query it to find DOM elements and atach events.

  • The simplest fix would be placing your <script> at the end of body.

  • Another fix is to attach handlers in window onload event ( that's how it works in code snippet below)

In code snippet provided in question the the way window.onload was attached was unclear. Also at the end of script expression Palindrome(str); raised error as var str is undefined, so i've fixed it.

See working snippet below:

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>

Upvotes: 3

Related Questions