javascript function and html onclick property

Question

I am trying to implement a javascript on my page and I want to refer to a function with the onclick property. How would I do this, how would I change my following code so that is actually runs the script correctly?

$(document).ready(function()
{
	function dosomething()
  {
  	alert('I just did something');
  }
  
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<input type="button" class="btn btn-default" value="Kortingscode" onclick="dosomething()">

Thanks in advance.

Because the function is inside of the ready so it is not global. — epascarello
– epascarello, Commented Mar 25, 2016 at 14:28
You should use the document.ready just when you want to run something at that moment. What you want to achieve is to create a function that can be called globally, so just declare it without that document.ready — AAlferez
– AAlferez, Commented Mar 25, 2016 at 14:33
Possible duplicate of Using jQuery to trigger html onclick event — ronakshah725
– ronakshah725, Commented Mar 25, 2016 at 14:37
There's no reason to use $(document).ready in this case. The code within doesn't need the document for anything. — David
– David, Commented Mar 25, 2016 at 14:37

Slava Shpitalny · Accepted Answer · 2016-03-25 14:32:24Z

4

Move the dosomething function outside the ready function on a global scope

answered Mar 25, 2016 at 14:32

Slava Shpitalny

4,2352 gold badges19 silver badges22 bronze badges

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

3 Comments

Barrosy Over a year ago

On stackoverflow it works, but it doesn't work in my fiddle. Code works fine now.

Slava Shpitalny Over a year ago

I'm sorry, didn't understand, does it work now or not?

Barrosy Over a year ago

Yes it works fine now. Thank you. I will mark this answered in a couple minutes.

Jorge Mejia · Accepted Answer · 2016-03-25 14:40:48Z

2

An other solution is adding the event to the button on the document.ready

$( document ).ready(function() {
   var button = document.getElementsByClassName("btn")[0];

   button.onclick=function(){
      alert('Hi');
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-default" value="Kortingscode">

answered Mar 25, 2016 at 14:40

Jorge Mejia

1,1611 gold badge11 silver badges28 bronze badges

Comments

claudios · Accepted Answer · 2016-03-25 14:33:12Z

0

You can easily use jquery for that.

First load the jquery script.

<script   src="https://code.jquery.com/jquery-1.12.2.min.js""></script>

Then

<input type="button" class="btn btn-default Kortingscode" value="Kortingscode">

The jquery:

   <script>
    $(".Kortingscode").click(function(){
        alert("The button was clicked.");
    });
   </script>

answered Mar 25, 2016 at 14:33

claudios

6,6768 gold badges51 silver badges98 bronze badges

Comments

Pierpaolo Cira · Accepted Answer · 2016-03-25 14:40:31Z

0

Why are you using document ready event?

You have two different solution:

ONE: declare your function as global (outside document ready)

function dosomething() {
 alert('I just did something');
}

TWO: declare your function as jquery event

$(document).ready(function() {
  $( ".btn-default" ).click(function() {
    alert('I just did something');
  })
)};

Make sure your javascript code is inside a <script></script> tag.

edited Mar 25, 2016 at 14:40

answered Mar 25, 2016 at 14:28

Pierpaolo Cira

1,48717 silver badges24 bronze badges

2 Comments

Barrosy Over a year ago

What do you mean by "declare your function as a jquery event"? I want to call the function within the onclick property, how would it look like, could you refer me to an example of some sort?

Pierpaolo Cira Over a year ago

As I already said, just don't use $(document).ready( but put directly the function name (so it becomes global)

Collectives™ on Stack Overflow

javascript function and html onclick property

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related