未捕获的ReferenceError：onclick上未定义函数

Question

I'm receiving an 'Uncaught Reference Error: function(eg upButton()) is not defined at HTMLButtonElement.onclick'. 我收到“未捕获的引用错误：HTMLButtonElement.onclick上未定义函数（例如upButton（））”。 I have a simple canvas game from a tutorial I followed which uses keyboard controls to move, however I wanted buttons too. 我遵循的教程中有一个简单的画布游戏，该游戏使用键盘控件来移动，但是我也想要按钮。

I always do a test page to make sure that everything's working fine, which it did, before I move it all to my main html file, however although I have literally copied and pasted my code from one file to the other it's giving me this error. 在将所有内容移到我的主要html文件之前，我总是做一个测试页以确保一切正常，尽管我确实将代码从一个文件复制并粘贴到了另一个文件，但这给了我这个错误。

The html button code: html按钮代码：

<button onclick="upButton()">Up</button>
<button onclick="downButton()">Down</button>
<button onclick="leftButton()">Left</button>
<button onclick="rightButton()">Right</button>

My javascript function code: 我的javascript函数代码：

function upButton() {
    character.y -= 15;
}

function downButton() {
    character.y += 15;
}

function leftButton() {
    character.x -= 15;
}

function rightButton() {
    character.x += 15;
}

From the fact that my test html file works, I thought that everything was defined correctly, and that it was calling this function correctly too, so I am unaware on why this is happening. 从我的测试html文件可以工作的事实出发，我认为所有定义都正确，并且它也正确地调用了此函数，因此我不知道为什么会这样。

Full html code: 完整的html代码：

    <!DOCTYPE html>
<html>
    <head>
        <title>CS25320</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <!-- Image from https://matthewboyz.deviantart.com/art/Blue-flat-wallpaper-555483912 -->
    <body background="background.png">

        <div id="header">
            <h1>Mystical Mountains Game</h1>
            <p>CS25320 / Programming for the Web</p>
            <ul>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/index.html"><b>Home</b></a></li>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/about.html"><b>About</b></a></li>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/help.html"><b>Help</b></a></li>
            </ul>
        </div>

        <div id="main">
            <br>
        </div>
        <p id="health"></p>
        <p id="health2"></p>
        <p id="health3"></p>
        <p id="health4"></p>

        <button onclick="upButton()">Up</button>
        <button onclick="downButton()">Down</button>
        <button onclick="leftButton()">Left</button>
        <button onclick="rightButton()">Right</button>

        <script src="thegame.js"></script>

        <div id="footer">
            <h3>Disclaimer</h3>

        </div>

    </body>

</html>

Full js code: 完整的js代码：

//Create Canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 450;
document.body.appendChild(canvas);

//Background image 
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function() {
    bgReady = true;
};
bgImage.src = "background4.png";

//Character image
var charReady = false;
var charImage = new Image();
charImage.onload = function() {
    charReady = true;
};
charImage.src = "character2.png";

//Jewel image
var jewelReady = false;
var jewelImage = new Image();
jewelImage.onload = function() {
    jewelReady = true;
};
jewelImage.src = "jewel.png";

//Game objects
var character = {
    speed: 256, // movement in pixels per second
    x: 0,
    y: 0
};

var jewel = { // Doesn't move so just has coordinates
    x: 0,
    y: 0
};

var jewelsCaught = 0; // Stores number of jewel caught

// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function(e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function(e) {
    delete keysDown[e.keyCode];
}, false);

//Buttons for cross-compatibility with other devices 
//I have added in this code to allow the user to use buttons
function upButton() {
    character.y -= 15;
}

function downButton() {
    character.y += 15;
}

function leftButton() {
    character.x -= 15;
}

function rightButton() {
    character.x += 15;
}

//Reset the game when the character catches a troll or jewel
var reset = function() {
    character.x = canvas.width / 2;
    character.y = canvas.height / 2;

    //Throw jewel on screen randomly
    jewel.x = 32 + (Math.random() * (canvas.width - 64));
    jewel.y = 32 + (Math.random() * (canvas.height - 64));
};

//Update game objects
var update = function(modifier) {
    if (38 in keysDown) { // Player holding up
        character.y -= character.speed * modifier;
    }
    if (40 in keysDown) { // Player holding down
        character.y += character.speed * modifier;
    }
    if (37 in keysDown) { // Player holding left
        character.x -= character.speed * modifier;
    }
    if (39 in keysDown) { // Player holding right
        character.x += character.speed * modifier;
    }

    //Are they touching?
    if (
        character.x <= (jewel.x + 52)
        && jewel.x <= (character.x + 52)
        && character.y <= (jewel.y + 52)
        && jewel.y <= (character.y + 52)
    ) {

        ++jewelsCaught;
        reset();
    }
};

//Draw everything
var render = function() {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }
    if (charReady) {
        ctx.drawImage(charImage, character.x, character.y);
    }
    if (jewelReady) {
        ctx.drawImage(jewelImage, jewel.x, jewel.y);
    }

    //Score
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.font = "20px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Jewels caught: " + jewelsCaught, 32, 32);
};

var i = 0;
for (i = 0; i < 100; i++) {
    if (jewelsCaught <= 5) {
        document.getElementById("health").innerHTML = "Health: *";
    }
    else if (jewelsCaught >= 6) {
        document.getElementById("health2").innerHTML = "Health: **";
    }
    else if (jewelsCaught >= 11 && jewelsCaught <= 15) {
        document.getElementById("health3").innerHTML = "Health: ***";
    }
    else if (jewelsCaught >= 16 && jewelsCaught <= 20) {
        document.getElementById("health4").innerHTML = "Health: ****";
    }
}

//Main game loop
var main = function() {
    var now = Date.now();
    //How many milliseconds have passed since the last interval
    var delta = now - then; 

    update(delta / 1000);
    //Record the timestamp
    render();

    then = now;

    //Request to do this again ASAP
    requestAnimationFrame(main);
};

//Cross-brower support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

//Play game
var then = Date.now();
reset();
main();

Answer 1

You should be aware that the code is already included to the page. 您应该知道该代码已包含在页面中。 For you full html code, I cannot find your javascript function code, upButton , downButton , leftButton and rightButton . 对于您完整的html代码，我找不到您的javascript函数代码upButton ， downButton ， leftButton和rightButton 。 It is no problem for the following code snippet. 以下代码段没有问题。

 //file: thegame.js //Create Canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 450; document.body.appendChild(canvas); //Background image var bgReady = false; var bgImage = new Image(); bgImage.onload = function() { bgReady = true; }; bgImage.src = "background4.png"; //Character image var charReady = false; var charImage = new Image(); charImage.onload = function() { charReady = true; }; charImage.src = "character2.png"; //Jewel image var jewelReady = false; var jewelImage = new Image(); jewelImage.onload = function() { jewelReady = true; }; jewelImage.src = "jewel.png"; //Game objects var character = { speed: 256, // movement in pixels per second x: 0, y: 0 }; function upButton() { character.y -= 15; } function downButton() { character.y += 15; } function leftButton() { character.x -= 15; } function rightButton() { character.x += 15; }

 <!DOCTYPE html> <html> <head> <title>CS25320</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <!-- Image from https://matthewboyz.deviantart.com/art/Blue-flat-wallpaper-555483912 --> <body background="background.png"> <div id="header"> <h1>Mystical Mountains Game</h1> <p>CS25320 / Programming for the Web</p> <ul> <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/index.html"><b>Home</b></a></li> <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/about.html"><b>About</b></a></li> <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/help.html"><b>Help</b></a></li> </ul> </div> <div id="main"> <br> </div> <p id="health"></p> <p id="health2"></p> <p id="health3"></p> <p id="health4"></p> <button onclick="upButton()">Up</button> <button onclick="downButton()">Down</button> <button onclick="leftButton()">Left</button> <button onclick="rightButton()">Right</button> <!-- include in code snippet --> <!-- <script src="thegame.js"></script> --> <div id="footer"> <h3>Disclaimer</h3> </div> </body> </html>

未捕获的ReferenceError：onclick上未定义函数

问题描述

1 个解决方案

解决方案1
0 2017-12-15 02:32:32

未捕获的ReferenceError：onclick上未定义函数

问题描述

1 个解决方案

解决方案1 0 2017-12-15 02:32:32

解决方案1
0 2017-12-15 02:32:32