simple javascript: "Reference Error: 'click' is undefined"

Question

So I'm making a satirical cookie-clicker based game as my first ever JS game.

I made a JSFiddle. (The image won't show, but the image is supposed to be a swag hat, which you click to get swag points.) My code is simple so far, but I was wondering why it told me my click() function was undefined. It's mentioned in the head and I don't know what's wrong.

http://jsfiddle.net/69mJq/

HTML:

<html>
<head>
    <title>Swag Dealr</title>
    <script src="swagdealr.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
</head>
<body>

    <h3>SWAG DEALR</h3>
    <a href="JavaScript:click()"><img src="img/swaghat.png"></a>
    <p>grams of swag</p>
    <p id="swagnumber"></p>
    <p id=></p>

</body>
</html>

js:

Game={};

Game.Launch = function() {
}




window.onload = function() {
    Game.Load();
};        

Game.Load = function() {
    var swagAmount = 0;
    function click() {
        swagAmount + (1 * swagMultiplier) = swagAmount;
        document.getElementById("swagnumber").innerHTML = swagAmount;
    }
}

I'm creating an image in my HTML file; clicking on the image will execute click(); and the function is defined in the JS file but the command line in Chrome tells me that click() is undefined every time I click the image. — BitLion, Feb 06 '14 at 07:15
I'm a newb so I decided to start off with something easy that could grow bigger; so I started off with a cookie-clicker type game where clicking the hat image (broken in JSFiddle) would give you points. — BitLion, Feb 06 '14 at 07:16

score 2 · Answer 1 · answered Feb 06 '14 at 07:37

Game={};
Game.Load = function() {
    var swagAmount = 0;
    Game.click(swagAmount);

}  
Game.click = function(swagAmount) {
    var swagMultiplier= 5
    swagAmount = swagAmount + (1 * swagMultiplier) ;
    document.getElementById("swagnumber").innerHTML = swagAmount;
}
Game.Load();

I have defined swagMultiplier and its working fine. Change the href as

<a href="Game.click()"><img src="img/swaghat.png"></a>

SpiderCode · Accepted Answer · 2014-02-06T07:30:14.183

1

Update your JS as mentioned below :

Game={};

Game.Launch = function() {
}

window.onload = function() {
    Game.Load();
};     

Game.Load = function() {
}   

var swagAmount = 0;
function click() {
        swagAmount = swagAmount + (1 * swagMultiplier);
        document.getElementById("swagnumber").innerHTML = swagAmount;
    }

Note: One thing I have noticed that swagMultiplier is not defined anywhere.

edited Feb 06 '14 at 07:30

answered Feb 06 '14 at 07:22

SpiderCode

10,062
2
22
42

It sent me to a nonexistent subdirectory in my files called /documents/swagdealr/click() and didn't work. – BitLion Feb 06 '14 at 07:29
Updated my answer. keep click event out of the **Game.Load** and define **swagMultiplier** as I mentioned in my note – SpiderCode Feb 06 '14 at 07:31
Thanks, got it. I got rid of swagMultiplier and pulled swagAmount out and made it a global var. – BitLion Feb 06 '14 at 07:32
will define swagMultiplier – BitLion Feb 06 '14 at 07:32

score 1 · Answer 3 · answered Feb 06 '14 at 07:23

1

That's because your click() method is wrapped in an anonymous function. Drag it outside and it will work:

Game.Load = function() {
    var swagAmount = 0;
}
function click() {...}

See this fiddle: http://jsfiddle.net/JohnnyWorker/69mJq/6/

answered Feb 06 '14 at 07:23

Johnny

481
4
13

It got rid of the 'click is undefined' error but now it's giving me the error "Invalid left-hand side in assignment". – BitLion Feb 06 '14 at 07:27
1

Yes, I noticed it, too. You have to check your code where I commented out. Don't you feel "swagAmount + (1 * swagMultiplier) = swagAmount;" might not be a valid statement? – Johnny Feb 06 '14 at 07:38
Haha, funny comment, though it was not an "anonymous function". ;) http://stackoverflow.com/questions/1140089/how-does-an-anonymous-function-in-javascript-work – loveNoHate Feb 06 '14 at 07:43
Interesting. If it's not an anonymous function, what's the name? Search this article (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope) with "anonymous function" and check the first result. – Johnny Feb 06 '14 at 07:48

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

Short answer: You had it out of Scope.

Long answer:

Game.Load = function() {
  var swagAmount = 0;
  function click() {
    swagAmount = swagAmount + (1 * + "swagMultiplier?");
    document.getElementById("swagnumber").innerHTML = swagAmount;
    console.log('clicked')
  }
  window.click = click;
}

You had the swagAmount = reversed, thus giving a left hand assignment error.
And what is swagMultiplier, you never had it assigned, so I put it in "" to acknowledge that.

JSFIDDLE: http://jsfiddle.net/69mJq/7/

score 0 · Answer 5 · answered Feb 06 '14 at 07:32

We have two problems in your code

You are assigning it wrongly

swagAmount + (1 * swagMultiplier) = swagAmount;

It should be

swagAmount = swagAmount + (1 * swagMultiplier);

You are adding the click event to a Game.Load ( even though its possible), for the sake of simplicity we can add the click method to the Game object.

Sample code

 Game.click = function () {
    swagAmount = swagAmount + (1 * swagMultiplier);
        document.getElementById("swagnumber").innerHTML = swagAmount;
 }

JS Fiddle Demo At DEMO

NOTE:

We need to stop the default behaviour of the link using event.preventDefault()

simple javascript: "Reference Error: 'click' is undefined"

5 Answers5

JSFIDDLE: http://jsfiddle.net/69mJq/7/