属性 onclick="function()" 未按预期运行？
[英]Attribute onclick="function()" not functioning as intended?
问题描述
Ive tried solving the problem, and i cant seem to find its solution.
我试过解决这个问题，但我似乎无法找到它的解决方案。 A few hours of fiddling around later, ive found out that the problem is within the button tag or the onclick attribute (Correct me if im wrong).几个小时后，我发现问题出在按钮标签或 onclick 属性内（如果我错了，请纠正我）。
My aim is to make the white dot move via buttons我的目标是通过按钮使白点移动
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function()
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 345;
canvas.height = 410;
canvas.style.border = "1px solid white";
var left = document.getElementById("left");
left.onclick = "playerLeft()";
var x = Math.round(canvas.width/2);
var y = Math.round(canvas.width/2);
var rectWidth = 5, rectHeight = 5;
var fps = 30, frames = 1000/fps;
var colour = "white";
var trailColour = "blue";
ctx.fillStyle = colour;
ctx.fillRect(x,y,rectWidth,rectHeight);
function playerLeft() {
ctx.fillStyle = trailColour;
ctx.fillRect(x,y,rectWidth,rectHeight);
x -= 6;
ctx.fillStyle = colour;;
ctx.fillRect(x,y,rectWidth,rectHeight);
}
function playerRight() {
ctx.fillStyle = trailColour;
ctx.fillRect(x,y,rectWidth,rectHeight);
x += 6;
ctx.fillStyle = colour;
ctx.fillRect(x,y,rectWidth,rectHeight);
}
function playerUp() {
ctx.fillStyle = trailColour;
ctx.fillRect(x,y,rectWidth,rectHeight);
y -= 6;
ctx.fillStyle = colour;
ctx.fillRect(x,y,rectWidth,rectHeight);
}
function playerDown() {
ctx.fillStyle = trailColour;
ctx.fillRect(x,y,rectWidth,rectHeight);
y += 6;
ctx.fillStyle = colour;
ctx.fillRect(x,y,rectWidth,rectHeight);
}
}
</script>
</head>
<body style="background-color: black">
<canvas id="canvas"></canvas>
<div style="text-align: center; padding: 5px">
<button id="left">Left</button>
<button id="up">Up</button>
<button id="down">Down</button>
<button id="right">Right</button>
</div>
</body>
</html>
2 个解决方案
解决方案1
3 已采纳 2017-02-28 16:52:01
One of the many reasons not to use onxyz="..." -style event handlers is that any functions you call from them must be globals .不使用onxyz="..."样式事件处理程序的众多原因之一是您从它们调用的任何函数都必须是globals 。 Your functions aren't, they're local to the window.onload callback.您的函数不是，它们是window.onload回调的本地函数。
Instead, just assign the function reference directly, either somewhat old-fashioned:相反，只需直接分配函数引用，要么有点老式：
left.onclick = playerLeft;
or using more modern techniques that allow for multiple handlers:或者使用允许多个处理程序的更现代的技术：
left.addEventListener("click", playerLeft);
解决方案2
0 2017-02-28 17:01:36
Just call the function without parenthesis.只需调用不带括号的函数。
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 345; canvas.height = 410; canvas.style.border = "1px solid white"; var left = document.getElementById("left"); left.addEventListener("click", playerLeft); var x = Math.round(canvas.width/2); var y = Math.round(canvas.width/2); var rectWidth = 5, rectHeight = 5; var fps = 30, frames = 1000/fps; var colour = "white"; var trailColour = "blue"; ctx.fillStyle = colour; ctx.fillRect(x,y,rectWidth,rectHeight); function playerLeft() { ctx.fillStyle = trailColour; ctx.fillRect(x,y,rectWidth,rectHeight); x -= 6; ctx.fillStyle = colour;; ctx.fillRect(x,y,rectWidth,rectHeight); } function playerRight() { ctx.fillStyle = trailColour; ctx.fillRect(x,y,rectWidth,rectHeight); x += 6; ctx.fillStyle = colour; ctx.fillRect(x,y,rectWidth,rectHeight); } function playerUp() { ctx.fillStyle = trailColour; ctx.fillRect(x,y,rectWidth,rectHeight); y -= 6; ctx.fillStyle = colour; ctx.fillRect(x,y,rectWidth,rectHeight); } function playerDown() { ctx.fillStyle = trailColour; ctx.fillRect(x,y,rectWidth,rectHeight); y += 6; ctx.fillStyle = colour; ctx.fillRect(x,y,rectWidth,rectHeight); } } </script> </head> <body style="background-color: black"> <canvas id="canvas"></canvas> <div style="text-align: center; padding: 5px"> <button id="left">Left</button> <button id="up">Up</button> <button id="down">Down</button> <button id="right">Right</button> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.