属性 onclick=“function()"没有按预期运行?-前端问题

Attribute onclick=quot;function()quot; not functioning as intended?(属性 onclick=“function()没有按预期运行?)

本文介绍了属性 onclick=“function()"没有按预期运行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试过解决这个问题，但我似乎找不到它的解决方案.经过几个小时的摆弄，我发现问题出在按钮标签或 onclick 属性中(如果我错了，请纠正我).

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

我的目标是让白点通过按钮移动

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>

推荐答案

不使用 onxyz="..." 样式的事件处理程序的众多原因之一是您调用的任何函数它们必须是全局变量.你的函数不是，它们是 window.onload 回调的本地函数.

One of the many reasons not to use onxyz="..."-style event handlers is that any functions you call from them must be globals. Your functions aren't, they're local to the window.onload callback.

相反，只需直接分配函数引用，或者有点过时:

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);

这篇关于属性 onclick=“function()"没有按预期运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！