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

a.onclick=myfunction()

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

a.onclick=myfunction

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

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

Collectives™ on Stack Overflow

Dynamically create onclick event anchor element - Javascript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related