CODEWITHSUNDEEP
javascript
user2641353
user2641353

Reputation: 15

How to get random div with javascript

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.

Upvotes: 0

Views: 4146

Answers (4)

Guffa
Guffa

Reputation: 700362

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

Upvotes: 0

w3bMak3r
w3bMak3r

Reputation: 892

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.

Upvotes: 1

Robbert
Robbert

Reputation: 6592

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>

Upvotes: 0

Hugo Sousa
Hugo Sousa

Reputation: 1926

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.

Upvotes: 4

Related Questions