如何使用javascript获取随机div
[英]How to get random div with javascript
问题描述
When i was on PHP interview they gave me test with PHP,JavaScript. 
当我接受PHP采访时，他们给了我PHP，JavaScript的测试。 One of the questions from JS was to get some random div ( and to do something with it, i cant remember what). JS的问题之一是获取一些随机div（并对其进行处理，我不记得了）。 I didn't get any html code and i needed to write just JS. 我没有得到任何html代码，我只需要编写JS。 Now i'm learning JS and i try to find solution for the question. 现在，我正在学习JS，并尝试找到该问题的解决方案。
I try this 我尝试这个
var node = document.getElementsByTagName('div');
var divLength=node.length;
var randomDiv=Math.random()*divLength;
and now i'm testing with some code 现在我正在测试一些代码
<html>
<head>
<script>
var node = document.getElementsByTagName('div');
var divLength=node.length;
alert("There are "+divLength+" div tags in the html code");
var randomDiv=Math.random()*divLength;
</script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
but when i run the result is: "There are 0 div tags in the html code" 但是当我运行时结果是：“ html代码中有0个div标签”
also i tried 我也尝试过
var node=document.querySelectorAll("div");
but the result is the same. 但结果是一样的。
4 个解决方案
解决方案1
4 2015-02-02 22:39:38
The problem is that your script is loaded before the DOM. 问题在于您的script是在DOM之前加载的。 So, when the script is executed, there are no div yet. 因此，执行script时，尚无div 。
Placing your script after the DOM loading should fix the problem. 在DOM加载后放置脚本应该可以解决此问题。
解决方案2
1 已采纳 2015-02-02 22:44:41
Two options I laid out below. 我在下面列出了两个选项。
You can attach an on load even to your opening body tag: 您甚至可以在打开的身体标签上附加负载：
<html>
<head>
<script>
function onLoad(){
var node = document.getElementsByTagName('div');
var divLength=node.length;
alert("There are "+divLength+" div tags in the html code");
var randomDiv=Math.random()*divLength;
}
</script>
</head>
<body onload="onLoad()">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
Or you can move your script to the bottom of your body: 或者，您可以将脚本移到正文的底部：
<html>
<head>
</head>
<body onload="onLoad()">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
var node = document.getElementsByTagName('div');
var divLength=node.length;
alert("There are "+divLength+" div tags in the html code");
var randomDiv=Math.random()*divLength;
</script>
</body>
</html>
Either of these will force the script to run after the page loads. 这两种方法都将强制脚本在页面加载后运行。
解决方案3
0 2015-02-02 22:41:43
As others have said, your script is loading before the divs are created. 就像其他人说的那样，您的脚本在创建div之前就已加载。 You can put the script at the end of the body or you can wrap it in a function and call the function after the body loads. 您可以将脚本放在主体的末尾，也可以将其包装在函数中，并在主体加载后调用该函数。
<head>
<script type="text/javascript">
function manipulateDivs() {
var node = document.getElementsByTagName('div');
var divLength=node.length;
alert("There are "+divLength+" div tags in the html code");
var randomDiv=Math.random()*divLength;
}
</script>
</head>
<body onload="manipulateDivs()">
Or alternatively 或者
<head>
<script type="text/javascript">
function manipulateDivs() {
var node = document.getElementsByTagName('div');
var divLength=node.length;
alert("There are "+divLength+" div tags in the html code");
var randomDiv=Math.random()*divLength;
}
window.onload = manipulateDivs;
</script>
</head>
解决方案4
0 2015-02-02 22:45:46
The code runs before the body is loaded, so there are no div elements at that time. 该代码在加载主体之前运行，因此当时没有div元素。 Run it from the load event. 从load事件运行它。
To pick an integer random number, you should use the Math.float method. 若要选择整数随机数，应使用Math.float方法。 What you get now is a floating point number. 您现在得到的是一个浮点数。
window.onload = function() {
var node = document.getElementsByTagName('div');
var divLength=node.length;
alert("There are " + divLength + " div tags in the html code");
var randomDiv = Math.floor(Math.random() * divLength);
// do something with node[randomDiv]
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.