Jump to content

onClick with separate file for .js function ?

vmars316

By vmars316
in JavaScript

 Share

Recommended Posts

vmars316 Member

vmars316

Posted
Posted (edited)

Hello & Thanks ,

 

I am learning from this example : 

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onclick
I want to put the .js in a separate file , <script src="skel-main-2.js"></script>
instead of within the .html .

 

Code is here :

quick.js: 
www.liesandcowpies.com/testMe/Quickjs/quick.js

(if needed)

 

 

 

js: 
pastebin.com/HXbrb86M
I want to put the .js in a separate file , <script src="skel-main-2.js"></script>
instead of within the .html .
But when I run it , up comes this console error : Uncaught ReferenceError: myFunction is not defined
? How can I connect .html with .js ?
Thanks
Edited by vmars316
Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted (edited)

I'm not sure why I haven't received a reply yet , maybe if I put code here instead of pastebin :

Here's the html "

 

<!DOCTYPE html>


<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width">
<link rel="shortcut icon" type="image/png" href="icon16.png" />
<!-- try here: -->
<script src="quick.js"></script>  
<script src="skel-main-2.js"></script>
<!-- -->
<style>
#assets {
height: 1px;
overflow: hidden;
visibility: hidden;
width: 1px;
}


body {
background-color: #000000;
margin: 0;
overflow: hidden;
padding: 0;
}


canvas {
cursor: default;
}
table { color: #;000000;
background-color: #C0C0C0;
height: 24px;
            border: none; 
}
</style>
</head>


<body>
<div> 
<table align="center" style="height:10px">
  <tr>
    <td width="10%"> totalScore = </td> <td id="totalScore" width="5%"> </td>
    <td width="8%"></td>
    <td width="10%"> oops! = </td> <td id="oopsScore" width="5%"> </td>
    <td width="8%"></td>
    <td width="10%"> goodHits = </td> <td id="goodHits" width="5%"> </td>
    <td width="8%"></td>
    <td width="10%"> totalShots = </td> <td id="totalShots" width="5%"> </td> 
  </tr>
  </table>
</div>
<!-- try here:
<script src="skel-main-2.js"></script>
-->
<div align="center">
<canvas id="canvas" align="center" width="640" height="300""> </canvas> <!-- width="800" height="600" -->
</div>
<!--          <script src="skel-main-2.js"></script> -->


<div id="assets">
<!-- <img id="frame0" src="frames/frame0.png" width="32" height="32" /> -->
<img id="bgCompound" src="sprites/bgCompound.png" width="320" height="191" />
</div>


<table align="center" style="background-color:#992d2d "> <tr><td>
<button onclick="myFunction()">goodHit</button>
<button onclick="myFunction()">oop</button>
<!-- <input type="button" id="hello-world2" value="Hello" 
           onClick="alert('Hello World! 1'); 
               alert('Hello World! 2');
alert('var test01 says '); 
"/>
--></td></tr></table> 
<!-- try here:
<script src="skel-main-2.js"></script>
-->
</body>
</html>
Note that I moved the code: <script src="skel-main-2.js"></script> to <head> section .
When I run .html I get this console error: "Uncaught TypeError: Cannot read property 'width' of undefined" for quick.js

That doesn't trouble me .

But when I click on one of the Buttons , i get this console error: "Uncaught ReferenceError: myFunction is not defined" .

As you can see in .html I have tried positioning <script src="skel-main-2.js"> in several place . But none can find the Function myFunction , unless I put the script ref as inline coding .

How can I get a clear path to <script src="skel-main-2.js"> ?

 

Btw: the code for myFunction in <script src="skel-main-2.js"> starts at line 59 .

 

Thanks

Edited by vmars316
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

It's definitely better to put code here. The TypeError might be because you have your code running immediately instead of in a load handler to run once the page loads. Any time code runs inside the head, the body and all elements have not been created yet. That's why people use load handlers. You could also move your script lines to the end of the body section instead of the head. You should also use a type attribute on the script tags.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted 


I'm not sure why I haven't received a reply yet




 


In all fairness, only 3 minutes had gone by since your first post.  This is a volunteer forum, so replies happen when someone can get to it.


 


However putting all your code into the post itself certainly aids in getting replies.



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		vmars316
	

				
				
					
						
Member
					
				
			

		

		

			

				


vmars316
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
					(edited)
				
				
			
		

	


	

    

	

		
		

			



 


In all fairness, only 3 minutes had gone by since your first post.  This is a volunteer forum, so replies happen when someone can get to it.


 


However putting all your code into the post itself certainly aids in getting replies.




Actually , I Posted it last night , then edited it to empty .


Then this morning I checked and there were no answers , so I edited it again , with html code . Guess the Forum keeps the original date Posted , not the last time edited . No probs . 


I wasn't complaining , just explaining why I was Posting again .


 


Anyways , I do greatly appreciate all the help you folks have given me and others over the years . 


And I try to give feedback , so yous can see the result .


Thanks again !


 


Here's what I am working on now : www.liesandcowpies.com/testMe/Quickjs/~paddle-index-NOW.html 


Except that is the older version . I want to move Buttons out of game , into html .....



			
				


	Edited  by vmars316
	
	

			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		vmars316
	

				
				
					
						
Member
					
				
			

		

		

			

				


vmars316
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

It's definitely better to put code here. The TypeError might be because you have your code running immediately instead of in a load handler to run once the page loads. Any time code runs inside the head, the body and all elements have not been created yet. That's why people use load handlers. You could also move your script lines to the end of the body section instead of the head. You should also use a type attribute on the script tags.


Thanks , I moved the code here :


</td></tr></table> 


<script type="text/javascript" src="skel-main-2.js"></script>


</body>


 


But it didn't help .  Still struggling............



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		davej
	

				
				
				
				
					
						
Devoted Member
					
				
			

		

		

			

				


davej
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

It looks like this Quick library hides the code from the global space. You need to assign the handlers to the buttons inside the code.


<button id="btn1">goodHit</button>
<button id="btn2">oop######</button>



//button handlers
document.getElementById('btn1').onclick = myFunction;
document.getElementById('btn2').onclick = myFunction;




			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
						
    
							
							
								
  • 
									2 weeks later...
								
    • 
							
						

					
					
					
				

					

					
					






	

	

	

		

			

				


	
		vmars316
	

				
				
					
						
Member
					
				
			

		

		

			

				


vmars316
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
					(edited)
				
				
			
		

	


	

    

	

		
		

			

Ok davej ,


I was able to do it two ways , 1) via .html , and 2) via .js .


1) .html way: lines 35 and 84 thru 88 .


2) .js way , lines  35 and 89 thru 91.





Thanks


 




<!DOCTYPE html>
<!--  // programName: BenghaziGame.html  http://pastebin.com/jPaFjcWk 
                   Running online:  http://liesandcowpies.com/quickjs/BenghaziGame.html   -->
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="shortcut icon" type="image/png" href="icon16.png" />
		<script type='text/javascript' src="quick.js"></script>  
		<style>
			#assets {
				height: 1px;
				overflow: hidden;
				visibility: hidden;
				width: 1px;
			}

			body {
				background-color: Black;
				margin: 0;
				overflow: hidden;
				padding: 0;
			}

			canvas {
				cursor: none;
			}
			table { color: #E1E1E1;
			background-color: #992D2D;
			height: 24px; width: 800px;
            border: none; 
            }
		</style>
	</head>

	<body>  <!--   html way: <body onresize="bodyResize()">  -->
<div>	
<table align="center">
  <tr>
    <td width="10%"> totalScore </td> <td id="totalScore" width="5%"> </td>
    <td width="8%"></td>
    <td width="10%"> oops! </td> <td id="oopsScore" width="5%"> </td>
    <td width="8%"></td>
    <td width="10%"> goodHits </td> <td id="goodHits" width="5%"> </td>
    <td width="8%"></td>
    <td width="10%"> totalShots </td> <td id="totalShots" width="5%"> </td>	
  </tr>
   </table>
</div>	
		<div align="center">
			<canvas id="canvas" width="800" height="600"></canvas>
		</div>

		<div id="assets">
			<img id="bgCompound" src="sprites/bgCompound.png" width="320" height="191" />
			<img id="manufacturer" src="sprites/manufacturer.png" width="180" height="100" />
			<img id="restartBtn" src="sprites/RestartButton.png" width="100" height="25" />
			<img id="pauseBtn" src="sprites/PauseButton.png" width="100" height="25" />
			<img id="playBtn" src="sprites/PlayButton.png" width="100" height="25" />
			<img id="quitBtn" src="sprites/QuitButton.png" width="100" height="25" />
			<img id="truth01Sprite" src="sprites/truth01.png" width="64" height="64" />
			<img id="lies01Sprite" src="sprites/lies01.png" width="64" height="64" />
			<img id="truth02Sprite" src="sprites/truth02.png" width="64" height="64" />
			<img id="lies02Sprite" src="sprites/lies02.png" width="64" height="64" />
			<img id="truth03Sprite" src="sprites/truth03.png" width="64" height="64" />
			<img id="lies03Sprite" src="sprites/lies03.png" width="64" height="64" />
			<img id="truth04Sprite" src="sprites/truth04.png" width="64" height="64" />
			<img id="lies04Sprite" src="sprites/lies04.png" width="64" height="64" />
 			<img id="sparkSprite" src="sprites/transSpark.png" width="28" height="28" />    
			<img id="pointerSprite" src="sprites/handPointerT.png" width="31" height="36" />
			<img id="throwerSprite" src="sprites/thrower.png" width="64" height="64" />
			<img id="cowpieSprite" src="sprites/cowpie.png" width="32" height="32" />

			<audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio>
			<audio id="battleFire" src="sounds/BattleFire.ogg"></audio>
			<audio id="oops" src="sounds/oops.ogg"></audio>
			<audio id="Hillary-WhatDiff" src="sounds/Splat-Hillary-WhatDiff.ogg"></audio> 
			<audio id="byebye" src="sounds/GoodByeFemale.ogg"></audio>
			<audio id="cymbals" src="sounds/Cymbals.ogg"></audio>
			<audio id="pling" src="sounds/Pling.ogg"></audio>
			<audio id="pingSound" src="sounds/ping.ogg"></audio>
			<audio id="pongSound" src="sounds/pong.ogg"></audio>
		</div>
<!--	html way: 
        <script type='text/javascript'> function bodyResize() {
	            // alert('.html  bodyResize from Html. ');
		        location.reload(); }
		</script>
		    ELSE 
		.js way:
<script type="text/javascript" >
window.addEventListener("resize", function(){ location.reload(); } );
</script>		
-->
		<script type='text/javascript' src="BenghaziGame.js"></script>
		
		
	</body>
</html>





			
				


	Edited  by vmars316
	
	

			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
				



	
	
		

			
				
Create an account or sign in to comment

				
You need to be a member in order to leave a comment

			
	
			

				

					

						
Create an account

						
Sign up for a new account in our community. It's easy!

						
							
						
						Register a new account
					

					

						
Sign in

						
Already have an account? Sign in here.

						Sign In Now
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
					

				
                

                




				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •