创建一个按钮数组Javascript
[英]Create an array of buttons Javascript
问题描述
I want to create a bunch of buttons in the html body bases on the array stored in Javascript. 
我想基于存储在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>
I want to have all 5 buttons LEXUS , AUDI , MAYBACK , FERRARI , TOYOTA and FERRARI show up on the body when the page load but I saw nothing. 我希望在页面加载时在机身上显示所有5个按钮LEXUS ， AUDI ， MAYBACK ， FERRARI ， TOYOTA和FERRARI ，但是我什么也没看到。
Are there anything wrong with my code. 我的代码有什么问题吗？ Please guys explain. 请大家解释。 Any helps are appreciate. 任何帮助表示赞赏。
4 个解决方案
解决方案1
2 已采纳 2018-01-14 07:40:58
The onload event can only be used on the document/body , frames , images , and scripts . onload事件只能在document/body ， frames ， images和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. div不是外部资源，因此onload事件不适用于该资源。
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. 也许您也应该在SO上查看window.onload与document.onload 。
解决方案2
1 2018-01-14 07:34:07
I believe the problem is that the div element doesn't have an onload event. 我相信问题在于div元素没有onload事件。
You should bind the printBtn method to the window.onload event instead. 您应该将printBtn方法绑定到window.onload事件。
I created a working jsfiddle for you to see : https://jsfiddle.net/5rq60y0u/1/ 我创建了一个工作的jsfiddle供您查看： https ://jsfiddle.net/5rq60y0u/1/
解决方案3
1 2018-01-14 07:54:45
I would just move your script to the end of the body, and then you don't need to worry about onload at all. 我只是将您的脚本移到正文的末尾，然后您根本不必担心onload 。 If you have images and things like that, onload won't fire until after they all load. 如果您有图像之类的东西，则在全部加载之后， onload才会触发。 No reason to wait for that. 没有理由等待。
Also your doctype is wrong, and the head is missing the required title tag. 此外，您的doctype错误，并且head缺少必需的title标签。 It's a good idea to validate your HTML code with the W3C Validator . 使用W3C Validator验证HTML代码是一个好主意。
<!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>
解决方案4
0 2018-01-14 08:17:34
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 . 您不能在div标签中使用onload（）函数，因为div不是外部资源，并且它是作为正文的一部分加载的，因此onload事件不适用于。 You can use the onload() function in body tag . 您可以在body标签中使用onload（）函数。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.