Javascript错误：未捕获ReferenceError：未定义[功能]

Question

I have two js files, both called by one HTML file.

<script type="text/javascript" src="scripts/levelmovement.js"></script>
<script type="text/javascript" src="scripts/generation.js"></script>

Part of levelmovement.js :

function moveLevel(){
    if(firstreset == true){
        resetTime();
    }
    var time2 = new Date();
    var millis2 = time2.getTime();
    var millis3 = millis2 - millis1;
    poschange = Math.floor(millis3 / 5);
    for(i = 0; i < chunkpos.length; i++){
        temppos[i] = chunkpos[i] - poschange;
        if(temppos[i] <= -150){
            temppos[i] += 1200;
            generate(i);
        }
        pos = temppos[i];
        document.getElementById('chunk' + i).setAttribute('style','left: ' + pos + 'px;');
    }
}

The function "moveLevel()" is called like this:

window.onload = function(){
    gameLoop();
}

function gameLoop(){
    if(currentscreen == 'playing'){
        moveLevel();
    }
    setTimeout('gameLoop()',1);
}

The entire generation.js :

var generatedtop;
var howtogentop = 'gen';
var howtogenbottom = 'gen';
var chunktogenerate = 0;

function topGen(g){
    document.getElementById('t' + chunktogenerate).setAttribute('src','images/terrain/t' + g + '.png');
    if(g == 'gap0'){
        howtogentop = 'gap';
    }
    else{
        howtogentop = 'gen';
    }

    if(g == 'gap0' || g == 'gap2'){
        generatedtop = 'gap';
    }
    else{
        generatedtop = 'default';
    }
}

function bottomGen(g){
    document.getElementById('b' + chunktogenerate).setAttribute('src','images/terrain/b' + g + '.png');
    if(g == 'gap0'){
        howtogenbottom = 'gap';
    }
    else{
        howtogenbottom = 'gen';
    }
}

function generate(chunknum){
    chunktogenerate = chunknum;
    var rand1 = Math.floor(Math.random()*100)+1;
    var rand2 = Math.floor(Math.random()*100)+1;
    if(howtogentop == 'gen'){
        if(rand1 <= 25){
            topGen('space');
        }
        if(rand1 <= 50 && rand1 > 25){
            topGen('jump');
        }
        if(rand1 <= 75 && rand1 > 50){
            topGen('slide');
        }
        if(rand1 > 75){
            topGen('gap0');
        }
    }
    if(howtogentop == 'gap'){
        topGen('gap2');
    }

    if(howtogenbottom == 'gen'){
        if(generatedtop == 'gap'){
            if(rand2 <= 33){
                bottomGen('space');
            }
            if(rand2 <= 66 && rand2 > 66){
                bottomGen('jump');
            }
            if(rand2 > 66){
                bottomGen('gap0');
            }
        }
        if generatedtop != 'gap'){
            if(rand2 <= 25){
                bottomGen('space');
            }
            if(rand2 <= 50 && rand2 > 25){
                bottomGen('jump');
            }
            if(rand2 <= 75 && rand2 > 50){
                bottomGen('jump');
            }
            if(rand2 > 75){
                bottomGen('gap0');
            }
        }
    }
    if(howtogenbottom == 'gap'){
        bottomGen('gap2');
    }
}

I have checked over everything and "moveLevel()" only works if i remove this line of code:

generate(i);

It appears as if the browser cannot see the "generate()" function and I don't know why...

Answer 1

This line:

if generatedtop != 'gap'){

is missing a bracket. The correct is:

if(generatedtop != 'gap'){

Answer 2

I came to this page searching for a solution to a similar issue I had. Although this page did not help directly but gave a direction to fix the problem.

Here is the actual reason why this happens:

When you have a function in a js file say file1.js, that you are calling in another js file say file2.js, even though they are called on the same html page, the function will not work if there is any js error in the whole file1.js, its like the whole js file is not included at all if it has an error .

So the solution is to clean up all the js errors that you are getting in all the included js files.

Hope this helps someone.

Answer 3

That's because your calling the function before it is defined. Changing the order of loading your js files should fix the issue.

<script type="text/javascript" src="scripts/generation.js"></script>
<script type="text/javascript" src="scripts/levelmovement.js"></script>