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());

Answer 2

这应该有效：

    <script type="text/javascript">
    function createSubmitButton(val) {
        var el = document.createElement("input");
        el.type = "submit";
        el.value = val;
        document.body.appendChild(el);
    }
    createSubmitButton("A");
    createSubmitButton("B");
    createSubmitButton("C");
    createSubmitButton("D");
    </script>

确保将脚本标记放在html代码的底部，就在结束正文标记之前。

Answer 3

k不是Node的类型。仅附加您创建的节点元素。

var k = new Keyboard();
document.body.appendChild(k.plus);
document.body.appendChild(k.minus);
document.body.appendChild(k.multi);
document.body.appendChild(k.divide);

在javascript上使用4按钮创建对象

3 个答案: