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.

Your code is okay, use <body onload="printBtn();"> and you are good to go — Mehdi Dehghani
– Mehdi Dehghani, Commented Jan 14, 2018 at 7:35
ah, I understand now. Because the "document.body.appendChild(btn)" only apply for the <body>, not the <div> itself. If I want to call within the div, i must give it an id="divBtn" then "document.divBtn.appendChild(btn)" — STEPHEN bui
– STEPHEN bui, Commented Jan 14, 2018 at 7:41
No, the problem is about using onload on div, see my answer. — Mehdi Dehghani
– Mehdi Dehghani, Commented Jan 14, 2018 at 7:42

Mehdi Dehghani · Accepted Answer · 2018-01-14 07:48:42Z

6

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, 2018 at 7:48

answered Jan 14, 2018 at 7:40

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

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

Comments

gillyb · Accepted Answer · 2018-01-14 07:34:07Z

2

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, 2018 at 7:34

gillyb

8,9308 gold badges55 silver badges80 bronze badges

Comments

Michael Geary · Accepted Answer · 2018-01-14 07:54:45Z

2

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, 2018 at 7:54

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

4 Comments

STEPHEN bui Over a year ago

So for example if I want to show those buttons in a specified div, I can still put it within that div ?

Michael Geary Over a year ago

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

STEPHEN bui Over a year ago

And one more thing is, each buttons have class=".." onclick="..." value="..." inside, how can I add them at the line "createElement" ?

Michael Geary Over a year ago

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.

Usman · Accepted Answer · 2018-01-14 08:17:34Z

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>

Collectives™ on Stack Overflow

Create an array of buttons from Javascript array

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related