JavaScript'myFunction'不是函数，即使它是

Question

I've something like

let myFunction;
$(document).ready(function() {
    myFunction = function(param) {
        // ...
    }
});

and inside my HTML, I have

<a href="javascript:void(0);" onclick="myFunction(1)">...</a>

Now it says Uncaught ReferenceError: myFunction is not defined .

 let myFunction; $(document).ready(function() { myFunction = function(param) { console.log('running'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:void(0);" onclick="myFunction(1)">...</a> 

OK, so what I tried was:

$(document).ready(function() {
    function myFunction(param) {
        // ...
    }
});

but again, Uncaught ReferenceError: myFunction is not defined . I've no idea, really, I used the first piece of code for a long time now and all of a sudden, that doesn't work anymore (or not in my context, or what ever). What's the correct approach to this?

I created a JSFiddle to show that what I tried doesn't work indeed (expected output is 1 or 2 in an alert, error given): https://jsfiddle.net/kgdcwe4z/5/

Answer 1

Better to do only with Jquery like this below:

<a href="javascript:void(0);" data-id="1" id="test">...</a>

$(document).ready(function() {
    $("#test").on('click', function() {
       const id = $(this).attr('data-id');
       //doSomething considering the id as the param here
    });
});

Another solution with only Javascript is:

const myFunction = function(param) {
    // ...
}

<a href="javascript:void(0);" onClick="myFunction(1)">...</a>

With your existing code, you can achieve like this with closure:

$(document).ready(function() {
    func = function(param) {
  console.log('param => ', param)
  }
})(func);

Updated answer link: https://jsfiddle.net/cjnp40e6/

Answer 2

Just move the function into the global scope.

// outside of $(document).ready(function() { ...
function myFunction(param) {
    // ...
}