1

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/

user10984218
  • 75
  • 1
  • 8
  • 1
    I cannot reproduce the problem, see the snippet - your first code appears to work. Can you edit it so that we can see the problem too, so there's a [MCVE] to debug? – CertainPerformance Apr 28 '19 at 09:29
  • You can declare your JavaScript outside document.ready and use it inside your anchor tag. Moreover, dom related activities must done inside document.ready.. thanks – Murtaza Hussain Apr 28 '19 at 09:34
  • Why do you want to mix javascript and jquery? You can do it with jquery itself – Mithun Shreevatsa Apr 28 '19 at 09:37
  • @CertainPerformance I see where you're coming from, but that's merely the reason I asked here. It worked seamless in previous projects and I don't have any idea what causes this to malfunction. – user10984218 Apr 28 '19 at 09:58
  • It seems that the code works on stacksnippets but not on JsFiddle, and there is a simple reason for that. – Salman A Apr 28 '19 at 10:36
  • @SalmanA will you share the _simple_ reason? – user10984218 Apr 28 '19 at 10:41
  • Possible duplicate of [Why isn't my JavaScript working in JSFiddle?](https://stackoverflow.com/questions/5431351/why-isnt-my-javascript-working-in-jsfiddle) – JJJ Apr 28 '19 at 10:41
  • @user10984218 I posted an answer already – Salman A Apr 28 '19 at 10:50
  • @JJJ how is that a duplicate? I just posted a JSFiddle to demonstrate, actually it behaves the exact way it does in my environment. – user10984218 Apr 28 '19 at 11:13
  • The duplicate explains why it doesn't work in JSFiddle. If it does the same in your own environment, it has the same issue. – JJJ Apr 28 '19 at 12:01

2 Answers2

3

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/

Mithun Shreevatsa
  • 3,588
  • 9
  • 50
  • 95
1

Just move the function into the global scope.

// outside of $(document).ready(function() { ...
function myFunction(param) {
    // ...
}
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392