javascript - 在 javascript 上创建一个带有 4 个按钮的对象

Question

我在 js 上创建了一个带有 4 个按钮的对象，但它没有显示，

这是我的代码:

function Keyboard() {
    this.plus = document.createElement("input");
    this.plus.type = "submit";
    this.plus.value = "A";
    this.minus = document.createElement("input");
    this.minus.type = "submit";
    this.minus.value = "B";
    this.multi = document.createElement("input");
    this.multi.type = "submit";
    this.multi.value = "C";
    this.divide = document.createElement("input");
    this.divide.type = "submit";
    this.divide.value = "D";

}
var k = new Keyboard();
document.body.appendChild(k);

我稍后会添加onClick，但为什么不显示？谢谢!

Answer 1

您的 Keyboard 构造一个具有 4 个属性的简单 JavaScript 对象，但不是 DOM 对象。稍后，您尝试将一个简单的 JavaScript 对象附加到您的文档中。

首先，您需要使用 document.createElement 创建 DOM 元素。
第二，这里根本不需要new关键字。
第三，您不需要将子项设置为属性。您将它们附加到父对象，这就足够了。

尝试以下代码:

function CreateKeyboard() {
  var t = document.createElement("div");

  var plus = document.createElement("input");
  plus.type = "submit";
  plus.value = "A";
  t.appendChild(plus);

  var minus = document.createElement("input");
  minus.type = "submit";
  minus.value = "B";
  t.appendChild(minus);

  var multi = document.createElement("input");
  multi.type = "submit";
  multi.value = "C";
  t.appendChild(multi);

  var divide = document.createElement("input");
  divide.type = "submit";
  divide.value = "D";
  t.appendChild(divide);

  return t;
}

document.body.appendChild(CreateKeyboard());

顺便说一句，您可以避免代码重复。例如，通过利用 Array.prototype.forEach:

function CreateKeyboard() {
  var t = document.createElement("div");

  ['A', 'B', 'C', 'D'].forEach(function(l) {
      var elem = document.createElement("input");
      elem.type = "submit";
      elem.value = l;
      t.appendChild(elem);
  });

  return t;
}

document.body.appendChild(CreateKeyboard());