How to get random div with javascript

Question

When i was on PHP interview they gave me test with PHP,JavaScript. One of the questions from JS was to get some random div ( and to do something with it, i cant remember what). I didn't get any html code and i needed to write just JS. Now i'm learning JS and i try to find solution for the question.

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"

also i tried

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

but the result is the same.

Or wrap it in a window.onload = function(){/*your code here*/}; — blex
– blex, Commented Feb 2, 2015 at 22:39
var all = document.querySelectorAll("*");console.log(all[parseInt(Math.random()*all.length,10)]); — Travis J
– Travis J, Commented Feb 2, 2015 at 22:43

Hugo Sousa · Accepted Answer · 2015-02-02 22:39:38Z

4

The problem is that your script is loaded before the DOM. So, when the script is executed, there are no div yet.

Placing your script after the DOM loading should fix the problem.

answered Feb 2, 2015 at 22:39

Hugo Sousa

1,9362 gold badges15 silver badges33 bronze badges

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

Comments

w3bMak3r · Accepted Answer · 2015-02-02 22:44:41Z

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.

Robbert · Accepted Answer · 2015-02-02 22:41:43Z

As others have said, your script is loading before the divs are created. 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>

Guffa · Accepted Answer · 2015-02-02 22:45:46Z

0

The code runs before the body is loaded, so there are no div elements at that time. Run it from the load event.

To pick an integer random number, you should use the Math.float method. 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]
}

answered Feb 2, 2015 at 22:45

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

How to get random div with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related