ReferenceError: function is not defined when using onclick

Question

I set up an anchor tag using javascript so that that onclick, I call a function showSavingsEasterEgg and pass it a value. The problem I am getting is that I'm not referencing my function correctly:

ReferenceError: showSavingsEasterEgg is not defined

I've tried moving the showSavingsEasterEgg function into the showData function to see if it solved the scoping problem, but it didn't.

Any tips

define(["jquery", "go/util", "underscore", "jqueryui/slider"], function ($, util,_) {

  function showData(data) {
    $('#item').append('<a class="savings_link" href="#" onclick=\'showSavingsEasterEgg('+data[key]['saving']+')\'> Savings');
  }

  function showSavingsEasterEgg(data){
    console.log("SUccess");
    console.log(data);
  }

});

btw ReferenceError: define is not defined

zb'
– zb'

2012-11-10 18:57:35 +00:00
Commented Nov 10, 2012 at 18:57 — zb'
– zb', Commented Nov 10, 2012 at 18:57

Denys Séguret · Accepted Answer · 2012-11-10 18:54:09Z

8

Put the definition of showSavingsEasterEgg directly in the global scope.

Here, it can't be found.

You can do this :

window.showSavingsEasterEgg = function (data){
    console.log("SUccess");
    console.log(data);
};
define(["jquery", "go/util", "underscore", "jqueryui/slider"], function ($, util,_) {
  function showData(data) {
    $('#item').append('<a class="savings_link" href="#" onclick=\'showSavingsEasterEgg('+data[key]['saving']+')\'> Savings');
  }
});

answered Nov 10, 2012 at 18:54

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zb' Over a year ago

do you know what is define() here ?

Denys Séguret Over a year ago

@eicto no, but that's not the problem : "showSavingsEasterEgg is not defined".

jAndy · Accepted Answer · 2012-11-10 19:00:50Z

2

Wondering why nobody suggested the most obvious, convenient and "best practice" way so far. You shouldn't use inline event handling at all, do it unobtrusive.

$('#item').append($('<a>', {
    'class':    'savings_link',
    href:       '#',
    click:      function(e) {
        console.log("SUccess");
        console.log(data);
    }
}});

answered Nov 10, 2012 at 19:00

jAndy

237k57 gold badges313 silver badges363 bronze badges

1 Comment

Huy Over a year ago

I wanted to use onClick because I have several anchor tags with the same ID and if I clicked on one with an event listener, my function gets called several times.

Anoop · Accepted Answer · 2012-11-10 18:55:36Z

1

Make showSavingsEasterEgg global. you can call only globally accessible objects/references from html code.

 window.showSavingsEasterEgg = function(data){
    console.log("SUccess");
    console.log(data);
  }

answered Nov 10, 2012 at 18:55

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

Rikki · Accepted Answer · 2012-11-10 18:55:24Z

0

You should know and understand what is the definition of "scope" in any programming languages. Please move the function named "showSavingsEasterEgg" out side of the parent function and it will work like a charm. It's because you defined it as a private member of the parent function.

Cheers

answered Nov 10, 2012 at 18:55

Rikki

3,5681 gold badge25 silver badges34 bronze badges

Collectives™ on Stack Overflow

ReferenceError: function is not defined when using onclick

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related