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);
  }

});

Answer 1

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');
  }
});