How to fix 'ReferenceError: hello is not defined' when it is

Question

I'm trying to code a game and I want to make it so that when you click a button, it increases the number. My game is like a mining game and you click to get ores and at the top right is a box which tells you what you are mining and you can see what you are mining, except when I click the mine button, it comes with the error which says ReferenceError: hello is not defined. The function hello is the function which gives you the ores.

I have tried fixing up some other functions which give you helpers in exchange for help but it didn't change anything, also I checked on stack overflow, but there wasn't anything that could help me. (Keep in mind I am 10 years old) HTML:

<div class="mwrapper">
    <button id="minebutton" onclick="hello()">Mine!</button>
    </div>

JavaScript:

//defining the vars.
    var stonei = 0;
    var deepness = 0;
    var stone = 0; 
    var silveri = 0;
    var silver = 0;
    var goldi = 0;
    var gold = 0;
    var platinumi = 0;
    var platinum = 0;
    var diamondi = 0;
    var diamond = 0;
    var alexandritei = 0;
    var alexandrite = 0;
    var amethysti = 0;
    var amethyst = 0;
    var unobtaniumi = 0;
    var unobtanium = 0;
    var emeraldi = 0;
    var emerald = 0;
    var tubi = 0;
    var tub = 0;
    var blockN;
    var block = 0;
    var money = 0;
    var stoneSold = 0;
    var silverSold = 0;
    var goldSold = 0;
    var clickers = 0;
    var moneyEver = 0;
    var BpS = 0;
//defining element to shorten code later
    var blockEl = document.getElementById("block");
    var btxtEL = document.getElementById("btxt");
    var moneyEl = document.getElementById("money"); 
    //changing what the 'Block you are mining' says
    var findBlock = function(b) {
        if (b === 0) {
            blockEl.style.backgroundColor = "grey";
            btxt.innerHTML = "Stone";
            blockN = "stone";
        }
        else if (b === 1) {
            blockEl.style.backgroundColor = "silver";
            btxt.innerHTML = "Silver";
            blockN = "silver";
        }
        else if (b === 2) {
            blockEl.style.backgroundColor = "gold";
            btxt.innerHTML = "Gold";
            blockN = "gold";
        }
        else if (b === 3) {
            blockEl.style.backgroundColor = "rgb(90, 89, 89)";
            btxt.innerHTML = "Platinum"
            blockN = "platinum";
        }
        else if (b === 4) {
            blockEl.style.backgroundColor = "rgb(185, 242, 255)";
            btxt.innerHTML = "Diamond"
            blockN = "diamond";
        }
        else if (b <= 10) {
            btxt.innerHTML = "Not coded yet";
        }
        //hehe
        else {
            btxt.innerHTML = "WHAAAA?????????";
        }
    }
    //adds materials to the left sidebar
    var createBlock = function(b) {
        if (b === 0) {
            stonei += 1;
            stone += 1;
            document.getElementById("stonei").innerHTML = stonei;
            document.getElementById("stone").innerHTML = stone;

        }
        else if (b === 1) {
            silveri += 1;
            silver += 1;
            document.getElementById("silveri").innerHTML = silveri;
            document.getElementById("silver").innerHTML = silver;
        }
        else if (b === 2) {
            goldi += 1;
            gold += 1;
           document.getElementById("goldi").innerHTML = goldi;
            document.getElementById("gold").innerHTML = gold;
        }
        else if (b === 3) {
            platinumi += 1;
            platinum += 1;
            document.getElementById("platinumi").innerHTML = platinumi;
            document.getElementById("platinum").innerHTML = platinum;

        }
        else if (b === 4) {
            diamondi += 1;
            diamond += 1;
            document.getElementById("diamondi").innerHTML = diamondi;
            document.getElementById("diamond").innerHTML = diamond;

        }
        //not coded rest

    }
    //From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    //for finding the block when you mine
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
    }
    //when you click the mine button it does this
    var hello = function() { 

        if (deepness === stone + silver + gold + platinum + diamond && stone >= stonei && silver >= silveri && gold >= goldi && platinum >= platinumi && diamond >= diamondi && stoneSold == stone - stonei &&  moneyEver == money + clickers &&typeof hsjsahjkd === 'undefined' || hsjsahjkd === null) {
        if (deepness <= 50) {
            block = 0;
            findBlock(block);
            deepness += 1;
            createBlock(block)
        }
        else if (deepness >= 50, deepness < 150) {
            block = getRandomInt(0, 2);

            findBlock(block);

            deepness += 1;
            createBlock(block)

        }
        else if (deepness >= 150, deepness < 250) {
            block = getRandomInt(0, 3);

            findBlock(block);

            deepness += 1;
            createBlock(block)

        }
        else if (deepness >= 250, deepness < 350) {
            block = getRandomInt(0, 4);

            findBlock(block);

            deepness += 1;
            createBlock(block)

        }
        else if (deepness >= 350) {
            block = getRandomInt(0, 5);

            findBlock(block);

            deepness += 1;
            createBlock(block)

        }

        }
        else {
            btxt.innerHTML = "Cheater.";
             stonei = 0;
             deepness = 0;
             stone = 0; 
             silveri = 0;
             silver = 0;
             goldi = 0;
             gold = 0;
             platinumi = 0;
             platinum = 0;
             diamondi = 0;
             diamond = 0;
             alexandritei = 0;
             alexandrite = 0;
             amethysti = 0;
             amethyst = 0;
             unobtaniumi = 0;
             unobtanium = 0;
             emeraldi = 0;
             emerald = 0;
             tubi = 0;
             tub = 0;
             stoneSold = 0;
             silverSold = 0;
             goldSold = 0;
             clickers = 0;
             moneyEver = 0;
             BpS = 0;
             console.log("You cheated. The game restarted.")
             if (typeof hsjsahjkd == 'undefined') {
                 var hsjsahjkd = 1;
             }
             else {
                 hsjsahjkd += 1;
             }


             document.getElementById("cheat").innerHTML = hsjsahjkd;
        }


    }

Sorry, but the functions needed are quite long. If you want to see the whole code, go to megagames.me/games/mining.html

I expected the out put of hello() to increment some of the ores, but it gave ReferenceError: hello is not defined.

Answer 1

Make sure your JavaScript is linked in the head tag or above the button. Otherwise you'll be calling a function that doesn't exist yet. An easy way to remember is to think of it as a book, you read from top to bottom the same way JavaScript executes top to bottom.

Also, try using Let and Const instead of Var and try using Switch Cases instead of if else all over. :-)