Javascript element.onchange不适用于元素列表

所以我有一个第二类，叫做表单和问题。表单包含一系列问题。 当我在数组中添加一个问题时，我会在每个问题中调用一个名为render的方法

    render() {
        let htmlElement = document.getElementById("formBody");

        let id = Question.GenerateID();
        htmlElement.innerHTML += `
                <div class="p-2">
                    <input type="text" class="input-transparent w-100" id="${id}.t" value="${this.Title}" placeholder="Unnamed question">
                </div>`;

        /**
         * @param {int} id
         */
        let questionNameChange = function(id) {
            this.Title = document.getElementById(id + ".t").value;
        };

        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
     }

表格的图像

问题是element.onchange，它允许我更改问题的标题

当我通过输入文本更改任何问题的标题时，它仅适用于最后一个已呈现的问题

---

我做错了什么吗？

也许您必须延迟绑定onchange，直到元素被插入dom。换句话说，将其包装在setTimeout中：

  setTimeout(function() {
        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
  })

查看此工作示例： 让问题={GenerateID:=>Math.floorMath.random*100} 类MyClass{ 建造师{ this.Title='my Title' } 问题名称变更ID{ this.Title=document.getElementByIdid+.t.value； document.getElementById`${id}-label`.innerHTML=this.Title } 渲染{ 让htmlElement=document.getElementByIdformBody； 设id=Question.GenerateID； htmlElement.innerHTML+=` `; 设置超时=>{ document.getElementByIdid+.t.onchange==>{ 此.questionNameChangeid } } } } $ => { 让myClass=新建myClass myClass.render myClass.render myClass.render }

---

您是否有多个具有该ID的元素？使用它不是一个好主意。在ID中。您将无法在CSS选择器中引用该ID，因为。用于选择类。工作正常！非常感谢。元素是否在DOM中并不重要。我不明白这个答案。分配给.innerHTML会将其插入DOM中。您似乎在暗示这是异步的，但事实并非如此。如果它不将其添加到DOM中，它将得到一个错误，因为document.getElementByIdid+.t将返回null。哦，我看到了问题所在。这是因为它使用的是innerHTML+=。这将重新呈现元素的所有HTML，并丢弃所有旧的事件处理程序。