如何通过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 eg

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

Answer 1

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

Answer 2

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