一个按钮的MVC实现不同类型button.Looping的按钮元素不显示div中的所有元素

Question

我想实现一个按钮的MVC。我使用创建了一个按钮 var btn = {btnElem : document.createElement('button')} ; 现在我想将此按钮继承到不同类型的按钮中，例如艺术按钮或逻辑按钮。所以我使用这个 btn 对象来获取算术按钮 var parent = Object.create(btn); var arthButn = {btnElem : parent.btnElem};。现在我想显示 arthButn s 从 0-9 数字循环。但它只显示一个按钮。

    buttonContainer = document.createElement('div');

for(var i=0;i<10;i++){
arthButn.btnElem.innerHTML = i;
buttonContainer.appendChild(arthButn.btnElem);
}

如果我使用 document.createElement('button') 代替 arthButn.btnElem 它工作正常。但是在这种方法中，多个元素不会附加到 buttonContainer div。按钮正在替换另一个按钮，并且只显示一个按钮。

另一个问题是我想将事件处理程序附加到其控制器文件上的 arthbtn。那么如何解决这个问题。

Answer 1

问题是您没有按预期创建 10 个按钮元素，您只创建了一个。

创建基础原型对象时

var btn = { btnElem: document.createElement('button') }
var parent = Object.create(btn);

您创建了一个 DOM 元素。然后创建一个使用 btn 对象作为原型的对象

var arthBtn = { btnElem: parent.btnElem }

请注意 arthBtn.btnElem 等于 parent.btnElem 等于 btn.btnElem 通过引用。因此，在您的循环中，您正在修改同一个 DOM 按钮元素的 innerHTML，然后将同一个元素附加到容器中。

这是一个可能的解决方案：https://jsfiddle.net/oz0ppkm5/。不要使用原型属性，而是使用原型方法，每次调用时都会 returns 一个新的 DOM 元素。

编辑：这个fiddle更好地说明了如何实现继承：https://jsfiddle.net/o52mn65q/.

一个按钮的MVC实现不同类型button.Looping的按钮元素不显示div中的所有元素

MVC of a button to implement different types of button.Looping of the button element doesnot display all the elements in div

html

javascript

model-view-controller

event-handling

javascriptmvc