Dynamically create onclick event anchor element - Javascript

Question

How do I dynamically create a onclick function in a hyperlink in JavaScript?

This is a code snippet - a while loop that creates several hyperlinks within the same page. I tried to just add the onclick event to the a-element, that is:

a.onclick=myfunction()

However, when the page is loaded with a list of these links, the function is automatically called for every link.

This is how my code looks like. I guess I should use an id for every link?

  var a = document.createElement('a');
  var linkText = document.createTextNode(child.innerHTML);
  a.appendChild(linkText);
  a.title = child.innerHTML;
  a.href = "#stockContent" + i;
  a.id = "link_id" + i;

  ...

"i" is the iterator variable.

I would definitely get in the habit of putting id's on the things you wish to manipulate. and just do something like "a.addEventListener('onclick', function(event){ do stuff here})". That would work. It wouldn't instantly execute - it would only execute "onclick" by having an event listener :). It's also possible to create custom event methods/listeners if required. — hipkiss
– hipkiss, Commented Jun 7, 2016 at 15:55

Sven Tschui · Accepted Answer · 2016-06-04 21:25:58Z

4

a.onclick=myfunction()

Will set the return value of myfunction as onclick. What you want is the following:

a.onclick=myfunction

answered Jun 4, 2016 at 21:25

Sven Tschui

1,44511 silver badges21 bronze badges

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

Comments

Fred Willmore · Accepted Answer · 2016-06-04 21:42:09Z

2

You can specify the onclick function in two ways:

1) with a named function:

function myFunction(){
  alert('hello');
}

a.onclick = myFunction;

2) with an anonymous function:

a.onclick = function(){ 
  alert('hello'); 
};

answered Jun 4, 2016 at 21:42

Fred Willmore

4,6461 gold badge33 silver badges36 bronze badges

Collectives™ on Stack Overflow

Dynamically create onclick event anchor element - Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related