Question

我想在存储在Javascript中的数组的html体内创建一堆按钮。

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

我希望所有5个按钮LEXUS，AUDI，MAYBACK，FERRARI，TOYOTA和FERRARI显示在正文上当页面加载但我什么都没看到。

我的代码有什么问题。请大家解释一下。任何帮助都是值得欣赏的。

Answer 1

onload事件只能在document/body，frames，images和scripts上使用。

它只能附加到正文和/或每个外部资源。 div不是外部资源，因此onload事件不适用于此。

使用以下内容：

<body onload="printBtn();">

而不是

<div onload="printBtn();">

你很高兴。

也许你也应该在这里查看window.onload vs document.onload。

Answer 2

我认为问题是div元素没有onload事件。

您应该将printBtn方法绑定到window.onload事件。

我创建了一个有效的jsfiddle供您查看： https://jsfiddle.net/5rq60y0u/1/

Answer 3

我只是将您的脚本移到正文的末尾，然后您根本不需要担心onload。如果你有这样的图像和事物，onload在它们全部加载之前就不会被激活。没理由等待。

此外，您的doctype错误，head缺少必需的title标记。使用W3C Validator验证您的HTML代码是个好主意。

＆＃13;

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

＆＃13;

Answer 4

您的代码中有一个错误！

你不能在div标签中使用onload（）函数，因为div不是外部资源，而是作为正文的一部分加载，所以onload事件不适用于那里。您可以在body标签中使用onload（）函数。

尝试下面的代码，它完美无缺！

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>

创建一个按钮数组Javascript

4 个答案: