Change onClick attribute with javascript

JavascriptHtmlFunction

Javascript Problem Overview


This is my function and it should change the onClick attribute of the HTML input, but if I use

document.getElementById('buttonLED'+id).onclick = "writeLED(1,1)";

it does not work at all, but if I use

document.getElementById('buttonLED'+id).onclick = writeLED(1,1);

the function executes by itself! Any ideas what code do I have to use to change the onCLick attribute WITHOUT executing the function, before the button is clicked?
Here is the full function, if it matters:

function showLED(id){
	if(color == 0){
		document.getElementById('buttonLED'+id).onclick = "writeLED(1,1)";
		document.getElementById('buttonLED'+id).value="light is on";
		//document.getElementById('buttonLED'+id).disabled = false;
	}else{
		document.getElementById('buttonLED'+id).onclick = "writeLED(1,0)";
		document.getElementById('buttonLED'+id).value="light is off";
		//document.getElementById('buttonLED'+id).disabled = false;
	}
}

Javascript Solutions


Solution 1 - Javascript

Well, just do this and your problem is solved :

document.getElementById('buttonLED'+id).setAttribute('onclick','writeLED(1,1)')

Have a nice day XD

Solution 2 - Javascript

You want to do this - set a function that will be executed to respond to the onclick event:

document.getElementById('buttonLED'+id).onclick = function(){ writeLED(1,1); } ;

The things you are doing don't work because:

  1. The onclick event handler expects to have a function, here you are assigning a string

     document.getElementById('buttonLED'+id).onclick = "writeLED(1,1)";
    
  2. In this, you are assigning as the onclick event handler the result of executing the writeLED(1,1) function:

     document.getElementById('buttonLED'+id).onclick = writeLED(1,1);
    

Solution 3 - Javascript

The line onclick = writeLED(1,1) means that you want to immediately execute the function writeLED(arg1, arg2) with arguments 1, 1 and assign the return value; you need to instead create a function that will execute with those arguments and assign that. The topmost answer gave one example - another is to use the bind() function like so:

    var writeLEDWithSpecifiedArguments = writeLED.bind(this, 1,1);
    document.getElementById('buttonLED'+id).onclick = writeLEDWithSpecifiedArguments;

Solution 4 - Javascript

Using Jquery instead of Javascript, use 'attr' property instead of 'setAttribute'

like

$('buttonLED'+id).attr('onclick','writeLED(1,1)')

Solution 5 - Javascript

You are not actually changing the function.

onClick is assigned to a function (Which is a reference to something, a function pointer in this case). The values passed to it don't matter and cannot be utilised in any manner.

Another problem is your variable color seems out of nowhere.

Ideally, inside the function you should put this logic and let it figure out what to write. (on/off etc etc)

Solution 6 - Javascript

Another solution is to set the 'onclick' attribute to a function that returns your writeLED function.

document.getElementById('buttonLED'+id).onclick = function(){ return writeLED(1,1)};

This can also be useful for other cases when you create an element in JavaScript while it has not yet been drawn in the browser.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionshiroView Question on Stackoverflow
Solution 1 - JavascriptMarcelo Teixeira RuggeriView Answer on Stackoverflow
Solution 2 - JavascriptDanCView Answer on Stackoverflow
Solution 3 - JavascriptpmitchellView Answer on Stackoverflow
Solution 4 - JavascriptKhaanView Answer on Stackoverflow
Solution 5 - JavascriptArindamView Answer on Stackoverflow
Solution 6 - JavascriptSamView Answer on Stackoverflow