屬性 onclick="function()" 未按預期運行？

Question

我試過解決這個問題，但我似乎無法找到它的解決方案。 幾個小時后，我發現問題出在按鈕標簽或 onclick 屬性內（如果我錯了，請糾正我）。

我的目標是通過按鈕使白點移動

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

Answer 1

不使用onxyz="..."樣式事件處理程序的眾多原因之一是您從它們調用的任何函數都必須是globals 。 您的函數不是，它們是window.onload回調的本地函數。

相反，只需直接分配函數引用，要么有點老式：

left.onclick = playerLeft;

或者使用允許多個處理程序的更現代的技術：

left.addEventListener("click", playerLeft);

Answer 2

只需調用不帶括號的函數。

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

屬性 onclick="function()" 未按預期運行？

問題描述

2 個解決方案

解決方案1
3 已采納 2017-02-28 16:52:01

解決方案2
0 2017-02-28 17:01:36

屬性 onclick=&quot;function()&quot; 未按預期運行？

問題描述

2 個解決方案

解決方案1 3 已采納 2017-02-28 16:52:01

解決方案2 0 2017-02-28 17:01:36

屬性 onclick="function()" 未按預期運行？

解決方案1
3 已采納 2017-02-28 16:52:01

解決方案2
0 2017-02-28 17:01:36