Create an array of buttons from Javascript array

Question

I want to create a bunch of buttons in the html body based on an array stored in Javascript. Here is my code:

<!DOCTYPE>
<html>
     <head>
           <script>
                var listBrand =['LEXUS','AUDI','MAYBACK','FERRARI','TOYOTA'];   
                //the array
                function printBtn() {
                    for (var i = 0; i < listBrand.length; i++) {
                       var btn = document.createElement("button");
                       var t = document.createTextNode(listBrand[i]);
                       btn.appendChild(t);
                       document.body.appendChild(btn);
                    }
                }
           </script>  
     </head>
     <body>
          <div onload="printBtn();">
          
          </div>
     </body>
</html>

I want to have all 5 buttons LEXUS, AUDI, MAYBACK, FERRARI, and TOYOTA show up in the body when the page loads, but the buttons fail to appear.

Is there anything wrong with my code? Any help and/or explanations are appreciated. Thank you.

ah, I understand now. Because the "document.body.appendChild(btn)" only apply for the , not the
itself. If I want to call within the div, i must give it an id="divBtn" then "document.divBtn.appendChild(btn)" — STEPHEN bui, Jan 14 '18 at 07:41
No, the problem is about using `onload` on `div`, see my answer. — Mehdi Dehghani, Jan 14 '18 at 07:42

Mehdi Dehghani · Accepted Answer · 2018-01-14T07:48:42.490

4

The onload event can only be used on the document/body, frames, images, and scripts.

It can be attached to only body and/or each external resource. The div is not an external resource, so the onload event doesn't apply there.

Use following:

<body onload="printBtn();">

Instead of

<div onload="printBtn();">

And you are good to go.

Maybe you should take a look at window.onload vs document.onload here on SO too.

edited Jan 14 '18 at 07:48

answered Jan 14 '18 at 07:40

Mehdi Dehghani

10,970
6
59
64

score 1 · Answer 2 · answered Jan 14 '18 at 07:34

1

I believe the problem is that the div element doesn't have an onload event.

You should bind the printBtn method to the window.onload event instead.

I created a working jsfiddle for you to see : https://jsfiddle.net/5rq60y0u/1/

answered Jan 14 '18 at 07:34

gillyb

8,760
8
53
80

score 1 · Answer 3 · answered Jan 14 '18 at 07:54

1

I would just move your script to the end of the body, and then you don't need to worry about onload at all. If you have images and things like that, onload won't fire until after they all load. No reason to wait for that.

Also your doctype is wrong, and the head is missing the required title tag. It's a good idea to validate your HTML code with the W3C Validator.

<!doctype html>
<html>
     <head>
          <title>Test</title>
     </head>
     <body>
           <script>
                var listBrand =['LEXUS','AUDI','MAYBACK','FERRARI','TOYOTA'];

                function printBtn() {
                    for (var i = 0; i < listBrand.length; i++) {
                       var btn = document.createElement("button");
                       var t = document.createTextNode(listBrand[i]);
                       btn.appendChild(t);
                       document.body.appendChild(btn);
                    }
                }
                
                printBtn();
           </script>  
     </body>
</html>

answered Jan 14 '18 at 07:54

Michael Geary

28,450
9
65
75

So for example if I want to show those buttons in a specified div, I can still put it within that div ? – STEPHEN bui Jan 14 '18 at 08:25
1

Sure, just get a reference to the div with any of the usual functions such as `var yourdiv = document.getElementById()`, and then instead of using `document.body.appendChild()` use `yourdiv.appendChild()`. – Michael Geary Jan 14 '18 at 08:27
And one more thing is, each buttons have class=".." onclick="..." value="..." inside, how can I add them at the line "createElement" ? – STEPHEN bui Jan 14 '18 at 09:30
`btn.className = "...";`, `btn.value="..."`, etc. For the event handler consider using `addEventListener` instead of `onclick`, although you can do it that way too. You may also want to consider using jQuery for this to make it easier. – Michael Geary Jan 14 '18 at 09:33

score 0 · Answer 4 · answered Jan 14 '18 at 08:17

There is one error in your code !

You cannot use the onload() function in div tag because div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there . You can use the onload() function in body tag .

Try the below code , it work perfectly !

var listBrand =['LEXUS','AUDI','MAYBACK','FERRARI','TOYOTA'];   
                //the array
                function printBtn() {
                    for (var i = 0; i < listBrand.length; i++) {
                       var btn = document.createElement("button");
                       var t = document.createTextNode(listBrand[i]);
                       btn.appendChild(t);
                       document.body.appendChild(btn);
                    }
                }

<html>
     <head>
    Created By Muhammad Usman
           <script>
                
           </script>  
     </head>
     <body onload="printBtn();">
          <div>

          </div>
     </body>
</html>

Create an array of buttons from Javascript array

4 Answers4

Linked