Creating an object with 4 button on javascript

Question

I created an object on js with 4 buttons, but it's not showing,

this is my code:

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

I will add the onClick later, but why is this not showing? Thanks!

there are no errors on my console. this is what k is containg. maybe i'm not creating an object correctly i'm not sure i'm fairly new to js — Mumfordwiz
– Mumfordwiz, Commented Dec 10, 2015 at 10:35
From what i can tell hes just instantiating a new instance of the class. but I think you forgot that the properties of the class arent being called. you are just calling the whole class, you have to get each button with dot notation in your case an example k.plus will out put the button for A — TrojanMorse
– TrojanMorse, Commented Dec 10, 2015 at 10:36

Yeldar Kurmangaliyev · Accepted Answer · 2015-12-10 10:47:42Z

Your Keyboard constructs a simple JavaScript object with 4 properties, but not a DOM object. Later, you try to append a simple JavaScript object to your document.

First, you need to create DOM element using document.createElement.
Second, you don't need new keyword here at all.
Third, you don't need to set subitems as properties. You append them to a parent object, and it is enough.

Try the following code:

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

By the way, you can avoid code repetition. For example, by utilizing 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());

florian · Accepted Answer · 2015-12-10 10:38:54Z

0

This should work:

    <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>

Make sure you place the script tag at the bottom of the html code, right before the ending body tag.

answered Dec 10, 2015 at 10:38

florian

214 bronze badges

Comments

madox2 · Accepted Answer · 2015-12-10 10:40:01Z

0

k is not type of Node. Append only Node elements you have created.

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

answered Dec 10, 2015 at 10:40

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Collectives™ on Stack Overflow

Creating an object with 4 button on javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related