Jump to content
vmars316

onClick with separate file for .js function ?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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............

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...