Call prototype function from onclick event, when button is added dynamically
Question
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.
3 answers
solution1
3 2018-08-03 07:07:43
- Create your element via
document.createElement() - Attach a click event listener to the element using an arrow function to preserve the
thiscontext - Empty out the
#myViewelement of all child nodes - Append the element to your
#myViewelement
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)
}
solution2
2 ACCPTED 2018-08-03 07:03:04
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);
}
solution3
0 2018-08-03 07:13:41
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.