How to fix function is not defined at HTMLButtonElement.onclick

Question

I am trying to add tree button items from my database table to my drop down menu, but the onclick event doesnt call the function being passed. Here is the error I am getting upon clicking the button. Any help would be appreciated.

addFormatItemHandler() 
{
    var self = this;

    this.m_tree.formatItem.addHandler
    (
        function(p_sender, p_event) 
        {
            var item = p_event.dataItem;

                    p_event.element.innerHTML = "<button onclick='myFunction()'></button>";                                 

        }
    );

}

myFunction(){

console.log("My function");

}

Expected result: My function

Actual result: myFunction is not defined at HTMLButtonElement.onclick

Pietro Nadalini · Answer 1 · 2019-01-09T20:55:51.630

0

As long as you put the word function before your function it should work if you're doing it like the following example:

function addFormatItemHandler() {
  var self = this;

  this.m_tree.formatItem.addHandler(
    function(p_sender, p_event) {
      var item = p_event.dataItem;
      p_event.element.innerHTML = "<button onclick='myFunction()'></button>";
    }
  );
}

function myFunction() {
  console.log("My function");
}

<button onclick="myFunction()">My button</button>

edited Jan 09 '19 at 20:55

answered Jan 09 '19 at 20:34

Pietro Nadalini

1,722
3
13
32

it works like this way but when I dynamically add my button through innerHTML, it doesnt work. – Faisal Mehboob Jan 09 '19 at 20:46
Your innerHTML might be wrong ` – Pietro Nadalini Jan 09 '19 at 20:48
I have updated my code. Item.header was only the header name. – Faisal Mehboob Jan 09 '19 at 20:56
I don't know what else can be wrong, if you're still having troubles can you make a small example on https://stackblitz.com/ and maybe there I can see if there's anything wrong – Pietro Nadalini Jan 09 '19 at 20:58
Pnadalini, I was able to fix that. Thanks for your help. Mitchapp post from this link https://stackoverflow.com/questions/37676726/angular-2-innerhtml-click-binding helped me to fix my issue. – Faisal Mehboob Jan 10 '19 at 22:06

How to fix function is not defined at HTMLButtonElement.onclick

1 Answers1