将JavaScript与HTML分开是行不通的
[英]Separating JavaScript from HTML doesn't work
问题描述
I am trying to separate my JavaScript from my HTML, but it doesn't seem to want to work. 
我试图将我的JavaScript与HTML分开，但它似乎并不想工作。 Here is the combined code: 这是组合的代码：
<script type="text/javascript">
var width = 100;
var height = 200;
function Ball(){
// random radius
this.radius = Math.floor(Math.random()*(10-5+1))+5;
// random x and y
this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
// random direction, +1 or -1
this.dx = Math.floor(Math.random()*2) * 2 - 1;
this.dy = Math.floor(Math.random()*2) * 2 - 1;
//random colour, r, g or b
var rcol = Math.floor(Math.random()*3);
this.col = rcol==0 ? "red" :
rcol==1 ? "blue" : "green";
}
// create an array of balls
numBalls = 10;
var balls = new Array(numBalls);
for(i= 0 ; i < numBalls ; i++){
balls[i] = new Ball();
}
// draw the balls on the canvas
function draw(){
var canvas = document.getElementById("myCanvas");
// check if supported
if(canvas.getContext){
var ctx=canvas.getContext("2d");
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 0.5;
ctx.strokeStyle="black";
// draw each ball
for(i = 0; i < numBalls ; i++){
var ball = balls[i];
ctx.fillStyle=ball.col;
ctx.beginPath();
// check bounds
// change direction if hitting border
if(ball.x<=ball.radius ||
ball.x >= (width-ball.radius)){
ball.dx *= -1;
}
if(ball.y<=ball.radius ||
ball.y >= (height-ball.radius)){
ball.dy *= -1;
}
// move ball
ball.x += ball.dx;
ball.y += ball.dy;
// draw it
ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
ctx.stroke();
ctx.fill();
}
}
else{
//canvas not supported
}
}
// calls draw every 10 millis
function bounce(){
setInterval(draw, 10);
}
</script>
<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()">
Canvas not supported.</canvas>
But when I separate it into separate html and javascript files like so: 但是，当我将其分成单独的html和javascript文件时，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>NodeJS, Socket.IO</title>
<!-- reference to the JQuery library -->
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<!-- our javascript file -->
<script type="text/javascript" src="./js/script.js"></script>
<!-- our css file -->
</head>
<body>
<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px">
Canvas not supported.</canvas>
</html>
And: 和：
$(document).ready(function() {
var width = 100;
var height = 200;
function Ball(){
// random radius
this.radius = Math.floor(Math.random()*(10-5+1))+5;
// random x and y
this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
// random direction, +1 or -1
this.dx = Math.floor(Math.random()*2) * 2 - 1;
this.dy = Math.floor(Math.random()*2) * 2 - 1;
//random colour, r, g or b
var rcol = Math.floor(Math.random()*3);
this.col = rcol==0 ? "red" :
rcol==1 ? "blue" : "green";
}
// create an array of balls
numBalls = 10;
var balls = new Array(numBalls);
for(i= 0 ; i < numBalls ; i++){
balls[i] = new Ball();
}
// draw the balls on the canvas
function draw(){
var canvas = document.getElementById("myCanvas");
// check if supported
if(canvas.getContext){
var ctx=canvas.getContext("2d");
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 0.5;
ctx.strokeStyle="black";
// draw each ball
for(i = 0; i < numBalls ; i++){
var ball = balls[i];
ctx.fillStyle=ball.col;
ctx.beginPath();
// check bounds
// change direction if hitting border
if(ball.x<=ball.radius ||
ball.x >= (width-ball.radius)){
ball.dx *= -1;
}
if(ball.y<=ball.radius ||
ball.y >= (height-ball.radius)){
ball.dy *= -1;
}
// move ball
ball.x += ball.dx;
ball.y += ball.dy;
// draw it
ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
ctx.stroke();
ctx.fill();
}
}
else{
//canvas not supported
}
}
// calls draw every 10 millis
function bounce(){
setInterval(draw, 10);
}
});
It doesn't work. 没用 Any help would be greatly appreciated! 任何帮助将不胜感激！
3 个解决方案
解决方案1
0 2015-08-16 20:57:23
Add this to your js file : document.getElementById ("myCanvas").addEventListener ("click", bounce, false); 将此添加到您的js文件中： document.getElementById ("myCanvas").addEventListener ("click", bounce, false); and remove onclick="bounce()" in your canevas tag if you left it in. 并将其保留在canevas标记中，并删除onclick="bounce()" 。
Also, you forgot the </body> before </html> . 此外，你忘了</body>之前</html>
解决方案2
0 2015-08-16 20:58:30
I think that the problem is that you wrapped all your code in $(document).ready . 我认为问题在于您将所有代码包装在$(document).ready 。 If you didn't need it with the inline script, you should be good without it also when using the external script. 如果内联脚本不需要它，那么在使用外部脚本时也可以不用它。
解决方案3
0 已采纳 2015-08-16 22:01:36
The trouble is that you used to have the canvas defined like this: 麻烦的是，您以前是这样定义画布的：
<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px"
onclick="bounce()">
Canvas not supported.</canvas>
And now it's defined like this: 现在，它的定义如下：
<canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px">
Canvas not supported.</canvas>
Notice that onclick="bounce()" is missing from your new HTML file. 请注意，新HTML文件中缺少onclick="bounce()" 。 That's not a problem! 没问题！ It's actually better not to attach event handlers inline. 实际上最好不要内联附加事件处理程序。 To make your script.js file work with the new HTML, change it so that the first few lines look like this: 要使您的script.js文件与新HTML一起使用，请对其进行更改，以使前几行如下所示：
$(document).ready(function() {
$('#myCanvas').click(bounce);
var width = 100;
var height = 200;
Actually, it would be even better to define the functions Ball() , draw() and bounce() outside the $(document).ready() function. 实际上，最好在$(document).ready()函数之外定义函数Ball() ， draw()和bounce() $(document).ready()函数。 Then you would write this: 然后，您可以这样编写：
var width = 100,
height = 200,
numBalls = 10,
balls;
$(document).ready(function() {
$('#myCanvas').click(bounce);
// create an array of balls
balls = new Array(numBalls);
for(i = 0 ; i < numBalls ; i++){
balls[i] = new Ball();
}
});
Here is a snippet containing the whole JavaScript file revised as I suggest: 这是一个片段，其中包含按照我的建议修订的整个JavaScript文件：
var width = 100, height = 200, numBalls = 10, balls; $(document).ready(function() { $('#myCanvas').click(bounce); // create an array of balls balls = new Array(numBalls); for(i = 0 ; i < numBalls ; i++){ balls[i] = new Ball(); } }); function Ball(){ // random radius this.radius = Math.floor(Math.random()*(10-5+1))+5; // random x and y this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius; this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius; // random direction, +1 or -1 this.dx = Math.floor(Math.random()*2) * 2 - 1; this.dy = Math.floor(Math.random()*2) * 2 - 1; //random colour, r, g or b var rcol = Math.floor(Math.random()*3); this.col = rcol==0 ? "red" : rcol==1 ? "blue" : "green"; } // draw the balls on the canvas function draw(){ var canvas = document.getElementById("myCanvas"); // check if supported if(canvas.getContext){ var ctx=canvas.getContext("2d"); //clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.globalAlpha = 0.5; ctx.strokeStyle="black"; // draw each ball for(i = 0; i < numBalls ; i++){ var ball = balls[i]; ctx.fillStyle=ball.col; ctx.beginPath(); // check bounds // change direction if hitting border if(ball.x<=ball.radius || ball.x >= (width-ball.radius)){ ball.dx *= -1; } if(ball.y<=ball.radius || ball.y >= (height-ball.radius)){ ball.dy *= -1; } // move ball ball.x += ball.dx; ball.y += ball.dy; // draw it ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false); ctx.stroke(); ctx.fill(); } } else{ //canvas not supported } } // calls draw every 10 millis function bounce(){ setInterval(draw, 10); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px"> Canvas not supported.</canvas>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.