CODEWITHSUNDEEP
javascripthtml
Sachin Thakur
Sachin Thakur

Reputation: 3

How to call a function within innerHTML?

This is InnerHTML String
I'm calling a function within innerHTML but it is not considered as a function call Instead it simply print the code as it is if I use script tag.

addCard()
  {
    if(this.cardItem.length == 0)
    {
      this.dataOrder = 0;
      this.temp = "<html><div class='col-md-4' id='replicateCard'><div class='card custom-card'><img class='card-img-top card-image' src='../../assets/images/user.png' alt='Card image cap'><a class='close' onclick='showAlert()'>×</a><div class='card-body card-body-custom'><br><p class='card-title'>"+this.dataTitle+"</p><p class='card-text'>"+this.dataDesc+"</p><p class='card-text'>"+this.dataDesc+"</p><p class='card-text'>"+this.dataOrder+"</p></div></div></div></html>";
      this.cardItem.splice(this.dataOrder, 0, this.temp);
    }
}

This is my function to call:

 showAlert()
  {
    alert("I'm working");
  }

Upvotes: 0

Views: 78

Answers (1)

Digvijay Upadhyay
Digvijay Upadhyay

Reputation: 759

Although I would not recommend doing this way. For your case you'll need to make sure second function is in the global scope.

If not you can simply write it as 

window.showAlert = function(){ alert("your message") }

Or you can bind the events dynamically to the new dom elements

Upvotes: 1

Related Questions