时间戳

首页 > 解决方案 > ES6 动态地为 HTML 元素分配一个类方法

javascript - ES6 动态地为 HTML 元素分配一个类方法

问题描述

我正在尝试将 HTML 内容动态地放置在 div 中。单击此内容时应执行一项功能。我在课堂上有这个功能。如何将此功能分配给 onclick 方法。一个精简的样本（不工作）here。我知道我可以分配一个 onclick 事件侦听器，但我想知道如何实现

class A{
  log(){
    console.log('test')
  }
}

class B extends A{
  write(){
    let z = '<span class="botSmartButtonSpan" onclick="super.log()"></span>';
    document.getElementById('x').innerHTML=z;
  }
}

let obj = new B();
obj.write();

标签： javascripthtmlecmascript-6es6-class

解决方案

onclick属性值在不同的范围内进行评估。super没有在那里定义。你不能通过将字符串混合在一起来实现这一点。

改用 DOM 方法。

write(){
  let z = document.createElement("span");
  z.classList.add("botSmartButtonSpan");
  z.addEventListener("click", () => this.log());
  document.getElementById('x').appendChild(z);
}

推荐阅读