Skip to content Skip to sidebar Skip to footer
Home / Button / Html / Javascript / Onclick

Attribute Onclick="function()" Not Functioning As Intended?

Post a Comment
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 at

Solution 1:

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

Solution 2:

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>

Post a Comment for "Attribute Onclick="function()" Not Functioning As Intended?"