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

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, Jan 30 '19 at 10:32
You can also try document.getElementById(id).addEventListener("click", clickedTest); after adding the element. — Sergio Tx, Jan 30 '19 at 10:39

Umair Abid · Accepted Answer · 2019-01-30T10:50:51.743

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 '19 at 10:50

answered Jan 30 '19 at 10:39

Umair Abid

1,453
2
18
35

Thank you, I had noticed my program had been running very slowly – Tori Harris Jan 30 '19 at 10:46
1

Good answer but `documeent` should be `document` ;) – Mark Baijens Jan 30 '19 at 10:50
Good work. Also better to keep using `;` on all lines or none of them. – Rafael López Dorado Jan 30 '19 at 11:10

behzad besharati · Answer 2 · 2019-01-30T10:55:25.830

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 '19 at 10:55

answered Jan 30 '19 at 10:38

behzad besharati

5,873
3
18
22

How to run a function from a link created in javascript

2 Answers2