javascript函数和html onclick属性

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.

Answer 1

在全局范围内将dosomething函数移至ready函数之外

Answer 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"> 

Answer 3

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.

Answer 4

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>