How to run a function from a link created in javascript

Question

I have a function in a javascript file that adds a link to a paragraph that I created in the HTML file. I want to call a function that is defined in the javascript file when the user clicks the link.

My HTML:

<p id="para"></p>

My JavaScript:

var paraHTML = document.getElementById("para");

function addLink(id) {
    paraHTML.innerHTML += '<a id="' + id + '" onclick="clickedTest(); return false;">Click me!</a>'
}

function clickedTest() {
    console.log('here');
}

I have also tried using href e.g.

paraHTML.innerHTML += '<a id="' + id + '" href="javascricpt:clickedTest();">Click me!</a>'

But both ways give me an error saying: ReferenceError: clickedTest is not defined

I have tried using the following code from this question but the number of links is constantly changing whilst my code is running which makes it difficult to use:

var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function () {
        console.log('here')
    }
}

The addLink() function is called elsewhere in my javascript program several times

You can use onClick() directly inside para, <p onclick="addLink()"></p> — Code_Tech
– Code_Tech, Commented Jan 30, 2019 at 10:32
What is the scope of the clickedTest() function? Do you have it inside a load handler? Since your code is working as expected. Make sure the function is in the global scope. — Mark Baijens
– Mark Baijens, Commented Jan 30, 2019 at 10:32
You can also try document.getElementById(id).addEventListener("click", clickedTest); after adding the element. — Sergio Tx
– Sergio Tx, Commented Jan 30, 2019 at 10:39

Umair Abid · Accepted Answer · 2019-01-30 10:50:51Z

4

Using innerHTML to create content is usually slow and is usually discouraged, a more organic approach will be to create the element pragmatically and then adding event listener to that element. For example,

var elem = document.createElement('a');
elem.addEventListener('click', myClickHandler);
elem.innerText = 'My Tag';
paraHTML.appendChild(elem)

function myClickHandler(e) {
  console.log('a is clicked')
}

This will not only fix your problem but will make your code more manageable

edited Jan 30, 2019 at 10:50

answered Jan 30, 2019 at 10:39

Umair Abid

1,4632 gold badges19 silver badges36 bronze badges

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

3 Comments

Tori Harris Over a year ago

Thank you, I had noticed my program had been running very slowly

Mark Baijens Over a year ago

Good answer but documeent should be document ;)

Rafael López Dorado Over a year ago

Good work. Also better to keep using ; on all lines or none of them.

behzad besharati · Accepted Answer · 2019-01-30 10:55:25Z

0

You can do something like this:

function callMe(){
}
var newLink = document.createElement('a');
newLink.href="javascript:callMe();";
newLink.innerHTML="this is a link";

paraHTML.appendChild(newLink);

edited Jan 30, 2019 at 10:55

answered Jan 30, 2019 at 10:38

behzad besharati

7,0103 gold badges21 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to run a function from a link created in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related