How do you assign a JavaScript 'onclick' attribute dynamically?

Question

Hi,

I'm creating a button dynamically using JavaScript and at the same time assigning attributes such as 'ID', 'type' etc and also 'onclick' in order to trigger a function.

All works fine apart from the assignment of the 'onclick'. When clicked, the button is not triggering the function as it is supposed to. the function I'm trying to run is 'navigate(-1)' as seen below.

Where am I going wrong?

Here's my code:

function loadNavigation() {
var backButton;
backButton = document.createElement('input');
backButton.ID = 'backButton';
backButton.type = 'button';
backButton.value='Back';
backButton.onclick = 'navigate(-1)';
document.body.appendChild(backButton);
}

Answer 1

you are assigning text to the onclick, try assigning a function.

backButton.onclick = function(){navigate(-1);};

Answer 2

Use a function instead of a string. For example,

backButton.onclick = function () { navigate(-1); };

Answer 3

You have to assign a function, not a string.

backButton.onclick = function wastefulDuplicationOfBackButton () {
    navigate(-1);
}

Answer 4

You should assign a function, not a string:

//...
backButton.onclick = function () {
  navigate(-1);
};
//...

Answer 5

backButton.onclick = function() { navigate(-1); }

Answer 6

As the other said you should assign a function.

Just wanted to point out that in this case you want to pass a value so you need to assign an anonymous function (or a named function defined inline) like

button.onclick = function() {otherfunction(parameter)};

If the function you want to assign does NOT require a parameter you can use it directly

button.onclick = otherfunction;

Note that there is no parenthesis in this case

button.onclick = otherfunction(); // this doesn't work

won't work as it will call otherfunction as soon as it is parsed