Run Javascript on Image Click

Question

I have the following graphic button on my website:

<a href="#" class="addto_cart_btn">
  <span id="btn_text">Click here to add to cart now</span>             
</a>

I want to run a specific javascript script when pressed (current value #) to run some javascript - javascript code essentially generates an iFrame popup with additional content.

What is the best approach to achieve this?

Answer 1

try it

<script type="text/javascript">
   window.onload = function() {
      document.getElementById("btn_text").onclick = function() {
         // Do your stuff here
      };
   };
</script>

Or if you can use jQuery

<script type="text/javascript">
   $(document).ready(function() {
      $("#btn_text").click(function(){
         // Do your stuff here
      });
   });
</script>

Answer 2

One approach is to add the onclick attribute

   <a href="#" class="addto_cart_btn" onclick="someFunction()">
      <span id="btn_text">Click here to add to cart now</span>             
    </a>

And then javascript:

function someFunction(){
   //do stuff
}

Answer 3

OnClick

<a href="#" class="addto_cart_btn" onclick="yourFunction();">
  <span id="btn_text">Click here to add to cart now</span>             
</a>

Answer 4

javascript

window.onload = function(){
   document.getElementById('btn_text').onclick = function(){
      // do stuff;
   }
}

jQuery

jQuery(function($){
   $('#btn_text').on('click', function(){
      // do stuff
   })
})