CODEWITHSUNDEEP
javascript
Waqas
Waqas

Reputation: 6812

Call prototype function from onclick event, when button is added dynamically

I have two prototype functions showPopup and buildView. In buildView, I am generating a dynamic HTML with a button and would like to call showPoup when button is clicked. However, when button is clicked, it throws

Error: The value of the property 'showPopup' is null or undefined, not a Function object

MyEditor.prototype.buildView = function(id) {
   document.getElementById("myView").innerHTML = "<input type='button' value='Edit' onclick='showPopup(getName(id), getPlace(id))' />";
}

MyEditor.prototype.showPopup = function(name, place) { }

I even tried using onclick='MyEditor.showPopup(getName(id), getPlace(id))', didn't work either.

Upvotes: 0

Views: 1940

Answers (3)

ndlinh
ndlinh

Reputation: 1365

If you want to build element by html text, you need do something like this.

MyEditor = function() {};
MyEditor.prototype.buildView = function(id) {
    document.getElementById("myView").innerHTML = "<input type='button' value='Edit' onclick='editor.showPopup(\"name\", \"id\")' />";
}

MyEditor.prototype.showPopup = function(name, place) { 
    console.log(name)
}

var editor = new MyEditor()
editor.buildView();
<!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"></head>
    <body>
        <div id="myView"></div>
    </body>
</html>

Upvotes: 0

Phil
Phil

Reputation: 165059

  1. Create your element via document.createElement()
  2. Attach a click event listener to the element using an arrow function to preserve the this context
  3. Empty out the #myView element of all child nodes
  4. Append the element to your #myView element
MyEditor.prototype.buildView = function(id) {
  const btn = document.createElement('input')
  btn.type = 'button';
  btn.value = 'Edit'
  btn.addEventListener('click', () => {
    this.showPopup(getName(id), getPlace(id))
  }, false)

  // empty out #myView
  const view = document.getElementById('myView')
  while (view.firstChild) {
    view.removeChild(view.firstChild)
  }
  view.appendChild(btn)
}

Upvotes: 3

Jonas Wilms
Jonas Wilms

Reputation: 138537

Because you have to call this.showPopup(), which is only possible if you build up the DOM manually:

 MyEditor.prototype.buildView = function(id) {
    const button = document.createElement("input");
    button.type = "button";
    button.value = "Edit";
    button.onclick = (evt) => {
      this.showPopup(getName(id), getPlace(id));
    };

     document.getElementById("myView").appendChild(button);
  }

Upvotes: 3

Related Questions