堆棧內存溢出
  簡體   English   中英

未捕獲的ReferenceError：onclick上未定義函數

[英]Uncaught ReferenceError: function not defined at onclick

 原文  2017-12-14 23:42:24  9   1    javascript/ html/ canvas

問題描述

我收到“未捕獲的引用錯誤：HTMLButtonElement.onclick上未定義函數（例如upButton（））”。 我遵循的教程中有一個簡單的畫布游戲，該游戲使用鍵盤控件來移動，但是我也想要按鈕。

在將所有內容移到我的主要html文件之前，我總是做一個測試頁以確保一切正常，盡管我確實將代碼從一個文件復制並粘貼到了另一個文件，但這給了我這個錯誤。

html按鈕代碼： 

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

我的javascript函數代碼： 

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

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

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

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

從我的測試html文件可以工作的事實出發，我認為所有定義都正確，並且它也正確地調用了此函數，因此我不知道為什么會這樣。

完整的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>

完整的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();

1 個解決方案

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

您應該知道該代碼已包含在頁面中。 對於您完整的html代碼，我找不到您的javascript函數代碼upButton ， downButton ， leftButton和rightButton 。 以下代碼段沒有問題。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 未捕獲的 ReferenceError：未使用 onclick 定義函數 未捕獲的ReferenceError :(函數）未在HTMLButtonElement.onclick中定義 未捕獲的ReferenceError：在HTMLInputElement.onclick中未定義函數 Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick 未捕獲的ReferenceError：在HTMLButtonElement.onclick中未定義函數 未捕獲的參考錯誤：<function> 未在 HTMLInputElement.onclick 中定義 未捕獲的ReferenceError：onclick函數Javascript上未定義變量 未捕獲的 ReferenceError：function 未在 HTMLDivElement.onclick 中定義 未捕獲的ReferenceError：未在onclick上定義 未捕獲的 ReferenceError：{function ONCLICK} 未在 HTMLAnchorElement.onclick 中定義
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM