Change onClick function arguments dynamically

Question

I have something like this:

<button id="button1" onClick="someFunc('arg1','arg2')"> </button> 

Is it possible in JavaScript to change parameters of the function someFunc to look like below:

<button id="button1" onClick="someFunc('somethingDiff1','somethingDiff2')"> </button> 

Solution 1

Try this

If you want in jquery then try this

$(document).ready(function(){
   var clickfun = $("#button1").attr("onClick");
   var funname = clickfun.substring(0,clickfun.indexOf("("));       
   $("#button1").attr("onclick",funname+"('somethingDiff1',"+"'somethingDiff2')");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" onClick="someFunc('arg1','arg2')">Button1</button> 

If you want in JavaScript then try this:-

<script>
  window.onload=function(){
  var clickfun = document.getElementById("button1").getAttribute("onclick");
  var funname = clickfun.substring(0,clickfun.indexOf("("));       
  document.getElementById("button1").setAttribute("onclick",funname+"('somethingDiff1',"+"'somethingDiff2')");    
};
</script>

Hope This will help you.

Solution 2

This could also be done by writing something similiar to this:

document.getElementById('button1').setAttribute('onclick','thiswhatyouwanttohave');

But the document have to be fully loaded, or at least the button must be present to be able to access the onclick attribute.

Solution 3

Based on your requirement, we can just change arguments like below: check this working fiddle.

https://jsfiddle.net/TaEgQ/42/

button.setAttribute( "onClick", "someFunc('new1','new2')" );

Solution 4

You can just go in your script.js and type something like that:

var value = 10

$("#button1").click(function() {

 if(value < 5)
  someFunc("arg1");
 else someFunc("arg2);

});

View more solutions

Comments

[epascarello]

so assign a need onclick method to it and remove the old one.

[LordNeo]

or use variables and set those instead

[QGA]

Thanks. I tried this already with some issues. The button is in a table which is generated dynamically.

[prizm1]

ok just wrap it with: window.onload = function () { } to be sure it is accesible, if it works fine also :) you can also set the onload attribute dynamically if this may help