CODEWITHSUNDEEP
jquery
Talent Runners
Talent Runners

Reputation: 419

Simple Jquery function is not working

This simple function isn't working. Showing following error

'myfunc' is undefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    function myfunc(){
      alert('In');
    }
  })
</script>
<button type="button" onclick="myfunc()">Alert</button>

Upvotes: 4

Views: 4548

Answers (6)

Carsten Massmann
Carsten Massmann

Reputation: 28196

This is a basic JavaScript issue: Your function myfunc is private to the unnamed "onload" jquery function.

In general terms - and assuming you still want to define your function inside the "onload" function - you could do it like this (a() is the "onload" function and b() is your myfunc()):

var b; // without this line it would still work, since
       // b would implicitely become a global variable in a()
function a(){
    // function b(){ ... would *not* work here
    b=function(){
      alert('In');
    }
}
a();
b();

Now, coming back to your actual problem: the solution provided by @guradio is certainly the best way to go forward, using jquery in a way it was meant to be used.

Upvotes: 0

guradio
guradio

Reputation: 15555

$(document).ready(function() {
  $("#btn").click(function() {
    alert('Button Clicked')
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="btn">Alert</button>

You can attach an event to the button like this. then just alert anything

Upvotes: 2

Keatinge
Keatinge

Reputation: 4341

It's a scope issue, myfunc isn't in the global scope. When you put it inside $(document).ready() you would only be able to call it inside the document.ready() callback.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  //this doesn't need to be in document.ready(), it won't get called until button is already loaded anyway
  function myfunc() {
    alert('In');
  }
</script>
<button type="button" onclick="myfunc()">Alert</button>

You can read more about how scoping works in JS at http://www.w3schools.com/js/js_scope.asp

Upvotes: 6

Mubin
Mubin

Reputation: 92

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    function myfunc(){
      alert('In');
    }
  $(document).ready(function(){
    
  })
</script>
<button type="button" onclick="myfunc();">Alert</button>

Upvotes: 0

Roberto Geuke
Roberto Geuke

Reputation: 552

The problem exists because you wait with creating the function until the document is ready. The document will be ready when all the DOM elements are loaded. So your button needs to be loaded, before the function gets created.

The button tries to load, but can't find the function. This is because it's not created yet. You should replace the function outside the document.ready () so the function gets created before the DOM elements are loaded.

Upvotes: 2

Steven Sugiarto Wijaya
Steven Sugiarto Wijaya

Reputation: 171

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>   $(document).ready(function(){
function myfunc(){
  alert('In');
}   });/*don't forget ;*/ 
</script> <button type="button" onclick="myfunc()">Alert</button>

Upvotes: 0

Related Questions