CODEWITHSUNDEEP
javascripthtml
Tori Harris
Tori Harris

Reputation: 593

How to run a function from a link created in javascript

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

Upvotes: 0

Views: 101

Answers (2)

behzad besharati
behzad besharati

Reputation: 6910

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

Upvotes: 0

Umair Abid
Umair Abid

Reputation: 1463

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

Upvotes: 4

Related Questions