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

Question

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);
}

An old question but this need to be said : you don't assign onclick anymore ;) use button.addEventListener('click', function) instead. — AxelH
– AxelH, Commented May 26, 2016 at 13:43
@AxelH What's the reason for using addEventListener over onclick? — Jack Roscoe
– Jack Roscoe, Commented May 31, 2016 at 14:51
Onclick is an old attribute to link a function to an event. AddEventListener use a collection to store the functions for each event, meaning that you can add as many function as you want for one event. This can prevent unexpected behavior if you have some script setting functionnalities that could override an other functionnalities. Onclick is useful for quick debug code but in production, I would not use. — AxelH
– AxelH, Commented Jun 1, 2016 at 6:48

nico · Accepted Answer · 2010-06-09 15:40:10Z

33

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

answered Jun 9, 2010 at 15:40

nico

51.9k17 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jasonmw · Accepted Answer · 2010-06-09 15:36:45Z

4

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

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

answered Jun 9, 2010 at 15:36

jasonmw

1,1389 silver badges20 bronze badges

Comments

mplungjan · Accepted Answer · 2020-03-17 06:42:06Z

4

In case this question is passed as a dupe, here is how to do it in current browsers

ES6

backButton.addEventListener("click",() => history.back());

Older but newer than onclick

backButton.addEventListener("click",function() { history.back() });

answered Mar 17, 2020 at 6:42

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

Bill Over a year ago

This answer works better in 2024 than the accepted answer

Quentin · Accepted Answer · 2010-06-09 15:36:57Z

3

You have to assign a function, not a string.

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

answered Jun 9, 2010 at 15:36

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

Christian C. Salvadó Over a year ago

@jessegavin, well, in IE you end up with two function objects due a serious bug on the JScript implementation of Named Function Expressions, not a such good thing :(...

Quentin Over a year ago

Goes to show that you can do this for years and still learn new things … mostly new problems with IE, but new things nonetheless!

Eli Grey · Accepted Answer · 2010-06-09 15:36:54Z

1

Use a function instead of a string. For example,

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

answered Jun 9, 2010 at 15:36

Eli Grey

36k14 gold badges80 silver badges96 bronze badges

Comments

Christian C. Salvadó · Accepted Answer · 2010-06-09 15:36:57Z

1

You should assign a function, not a string:

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

answered Jun 9, 2010 at 15:36

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Comments

Kevin Le - Khnle · Accepted Answer · 2010-06-09 15:39:02Z

0

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

answered Jun 9, 2010 at 15:39

Kevin Le - Khnle

10.9k11 gold badges57 silver badges85 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related