JavaScript - Wondering how to add html elements

Question

So I have this code:

var add, substract, multiply, divide;
var calculation = {
    add: {
        place: 2,
        name: add,
        calculation: function (a,b) {return a + b;},
        output: function (a,b) {return a + ' + ' + b;},
        buttonHTML: '+'
    },

    substract: {
        place: 2,
        name: substract,
        calculation: function (a,b) {return a - b;},
        output: function (a,b) {return a + ' - ' + b;},
        buttonHTML: '-'
    },

    multiply: {
        place: 1,
        name: multiply,
        calculation: function (a,b) {return a * b;},
        output: function (a,b) {return a + ' * ' + b;},
        buttonHTML: '*'
    },

    divide: {
        place: 1,
        name: divide,
        calculation: function (a,b) {return a / b;},
        output: function (a,b) {return a + ' / ' + b;},
        buttonHTML: '/'
    },
};
document.getElementById("calculator").innerHTML=('
for (var i = 0;i < 10; i++){
    var btn = document.createElement ("BUTTON");
    var t = document.createTextNode (i);
    btn.appendChild(t);

};');

In my html file the script is loaded in the head elements. In body I have a div element named calculator. Now what I want to do is to create buttons inside of that div element with the loop I have. But what I have written seems to not work and I fail to find any better solution too. Any ideas?

innerHTML can only be a string. you're adding something that looks like a mixture of a closure and a string and doesn'T really exist. get rid of the document.getElementById("calculator").innerHTML=part and place the rest of the code inside a function that gets called on window.onload. — Johannes H.
– Johannes H., Commented Feb 15, 2014 at 14:36
But how do I make the window.onload use the function in the div element? — Veske
– Veske, Commented Feb 15, 2014 at 14:42
I basicly load the script in the <head> tags. Div tags are in the <body> tags. Div id is calculator and I want to make it so that the script will find the div and put the buttons inside of it. — Veske
– Veske, Commented Feb 15, 2014 at 14:48
Why not write the buttons directly into the calculator Div? Why do you want to use a script to create them? — jing3142
– jing3142, Commented Feb 15, 2014 at 14:51
@JohannesH. yes, sorry if I was unclear. I meant - it wont do what you're expecting it to do in the current context . — gprasant
– gprasant, Commented Feb 15, 2014 at 15:08

Johannes H. · Accepted Answer · 2014-02-15 15:02:34Z

2

The function that creates the buttons looks fine to me. The only thing is: it's not a function, and it doesn't get executed anywhere. Instead, it's assigned as a string to innerHTML. That won't work. Instead, use this:

window.onload = function () {
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("BUTTON");
        var t = document.createTextNode (i);
        btn.appendChild(t);
        document.getElementById("calculator").appendChild(btn);
    } 
};

answered Feb 15, 2014 at 15:02

Johannes H.

6,1671 gold badge23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johannes H. Over a year ago

No problem ;) Hope you didn't just take it but you also understood why your approach was wrong and how this works?

jing3142 · Accepted Answer · 2014-02-15 15:06:43Z

1

Just for the numbers 0 to 9 the following function will add the required buttons inside a div with a known id. It will not necessarily position them as you need nor get them to respond as you require but it should get them into the div.

function insertNumberButtons(id) {
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("BUTTON");
        var t = document.createTextNode (i);
        btn.appendChild(t);
        document.getElementById(id).appendChild(btn);
    }
}

answered Feb 15, 2014 at 15:06

jing3142

1,8711 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

JavaScript - Wondering how to add html elements

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related