javascript创建动态html函数？

<分区>

我正在制作一个动态创建 html 元素的程序，当您单击这些元素中的任何一个时，它应该在另一个文本框中显示其值。这是我用来定义元素的类:

class msg_element{
  constructor(msg){
    this.message = msg;

    this.element = document.createElement("P");
    this.element.innerHTML = this.message;
    this.element.addEventListener("click", function(){
      document.getElementById("update").value = this.message;
    });

    document.getElementById("textview").appendChild(this.element);
  }
}

这是创建元素的循环:

for(var i = 0; i < bmg_msg.length; i++){
    var element = new msg_element(bmg_msg[i]);
  }

它正确地创建了所有元素，但是点击功能不起作用，它只是在文本框中显示“未定义”。我该怎么做才能解决这个问题？

最佳答案

线

    this.element.addEventListener("click", function(){
      document.getElementById("update").value = this.message;
    });

是问题所在。创建回调时，您将其定义为 function(){...}。问题在于它会导致 this 引用事件目标。要解决此问题，您可以:

使用箭头函数，这样this 将引用当前类实例。

    this.element.addEventListener("click", ()=>{
      document.getElementById("update").value = this.message;
    });

或者创建一个变量来存储对构造函数的引用

    let _this = this;
    this.element.addEventListener("click", function(){
      document.getElementById("update").value = _this.message;
    });

关于javascript创建动态html函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58903053/

上一篇：javascript - JavaScript 的 Set 对象的意外行为

下一篇：javascript - 使用javascript向上、下、左、右移动框

相关文章：

javascript - 在鼠标悬停时为另一个 div 上的按钮更改图像

javascript - 在 Firefox Web Extension 中使用 chrome.runtime.sendMessage 不会产生响应

javascript - 由于 XSS 漏洞，我该如何将这个 insidehtml 循环转换为 innertext 循环？

javascript - 无法让简单的 onclick 脚本工作。可能会搞乱变量

javascript - JQuery ScrollTop 滚动太远

javascript - 如何在 Jquery Datatable 中翻阅所有页面并返回

c# - javascript getelementbyid 问题

javascript - 为什么点击 href ="#"页面会向上滚动？

javascript - 如何设置 animate.css 动画的持续时间？

javascript - 如何在 JSFiddle 上获取 Facebook Like 按钮？