JS Error: Uncaught ReferenceError: makePicSmall is not defined

Question

i made a function, which is called, when whenever someone clicks on one of the little pictures, as you can see in the picture below. My functions, which are to be executed look like this:

function makePicSmall(giveString){
    if(firstTime){
        firstTime = NO;
        makePicBig(giveString);
    }else{
        $("#bigPic").animate({width:0, height: 0}, 1000);
        window.setTimeout(makePicBig(giveString,1000));
    }
}

function makePicBig(sourceString){
    document.getElementById("bigPic").style.visibility = "visible";
    document.getElementById("bigPic").src = sourceString;

    $("#bigPic").animate({width:320, height: 586}, 3000);
}

My function is called like:

<a class="lilPic1Link" >
    <img src="resources/littleFlyingDoggScreen1.png" alt="Willkommen-Screen" width="52" height="93" id="lilPic1"    onClick="makePicSmall('resources/flyingDoggScreen1.PNG')">
</a>
<a class="lilPic2Link" >
    <img src="resources/littleFlyingDoggScreen2.png" alt="screen1" width="52" height="93" id="lilPic2" onClick="makePicSmall('resources/flyingDoggScreen2.PNG')">
</a>
<a class="lilPic3Link" >
    <img src="resources/littleFlyingDoggScreen3.png" alt="screen2" width="52" height="93" id="lilPic3" onClick="makePicSmall('resources/flyingDoggScreen3.PNG')">
</a>

But when I click on a little picture, I get: Uncaught ReferenceError: makePicSmall is not defined.

Here is a picture so you don´t have to imagine that stuff.

Why do I get this error? And how can I fix it? Thank you in advance!

What's `Boolean firstTime = YES` doing there? its not JavaScript and will break subsequent valid code, you mean `var` perhaps? — Alex K., Dec 09 '15 at 12:26
you should start do quoting the string variable else use as boolean variable like true / false — Venkat.R, Dec 09 '15 at 12:30

score 2 · Accepted Answer · edited May 23 '17 at 12:01

Please use true or false for booleans in Javascript, YES and NO are the Objective-C variants.

Change line 45 to

var firstTime = true;

and line 54 to

firstTime = false;

Also there's another error on line 58, you have a misplaced parentheses )

makePicBig only takes one argument. The 1000 belongs to the setTimeout function.

Finally, since we're being helpful, in the long term save yourself some headache and avoid inline javascript by moving your js code in to separate js files.

Venkat.R · Answer 2 · 2015-12-09T12:40:14.633

firstTime is not defined and assigned properly with quotes. add it in the window scope like below.

var firstTime;

function makePicSmall(giveString){
    if(firstTime){
        firstTime = 'NO';
        makePicBig(giveString);
    }
    else {
        $("#bigPic").animate({width:0, height: 0}, 1000);
        window.setTimeout(makePicBig(giveString), 1000);
    }
}

Note: if you want to check each firstTime click of the img. play with data attributes like below.

<img src="resources/littleFlyingDoggScreen1.png" 
data-first-time="no"
alt="Willkommen-Screen" width="52" height="93" 
id="lilPic1"
onClick="makePicSmall('resources/flyingDoggScreen1.PNG')">

score 0 · Answer 3 · answered Dec 09 '15 at 12:25

For the error on line 45:

var firstTime = true;

Because in javascript you can define every variable with var. And I'm not quite sure but if you solve that problem then the other error shoudn't be displayed too because the function doesn't throw an error(because of the undefined variable).

JS Error: Uncaught ReferenceError: makePicSmall is not defined

3 Answers3