Question

当我接受PHP访谈时，他们给我测试PHP，JavaScript。 JS的一个问题是得到一些随机的div（并且用它做一些事情，我不记得是什么）。我没有得到任何HTML代码，我只需要编写JS。现在我正在学习JS，我试图找到问题的解决方案。

我试试这个

var node = document.getElementsByTagName('div');
var divLength=node.length;
var randomDiv=Math.random()*divLength;

现在我正在测试一些代码

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

但是当我运行结果时：＆＃34; html代码中有0个div标签＆＃34;

我也试过

var node=document.querySelectorAll("div");

但结果是一样的。

Answer 1

问题是你的script是在DOM之前加载的。因此，当执行script时，还没有div。

在DOM加载后放置脚本可以解决问题。

Answer 2

正如其他人所说，你的脚本是在创建div之前加载的。您可以将脚本放在正文的末尾，也可以将其包装在函数中，并在正文加载后调用函数。

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

或者

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

Answer 3

我在下面列出了两个选项。

你甚至可以在你的开场身份标签上附加一个载荷：

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

或者您可以将脚本移动到身体的底部：

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

其中任何一个都会强制脚本在页面加载后运行。

Answer 4

代码在加载正文之前运行，因此当时没有div个元素。从load事件中运行它。

要选择整数随机数，您应该使用Math.float方法。你现在得到的是一个浮点数。

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]
}

如何使用javascript获取随机div

4 个答案: