CODEWITHSUNDEEP
javascript
Reginald1234
Reginald1234

Reputation: 335

Random output from array 1 output instead of 2

I want to output 2 different random array objects. This is what I got so far. But It only shows 1 output instead of 2. How is this possible? I want to output 2 different random array objects. This is what I got so far. But It only shows 1 output instead of 2. How is this possible?

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<script>


  
  var myArray = [
  "Apples",
  "Bananas",
  "Pears"
];

    
var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];


document.getElementById("randomItem1").innerHTML=randomItem1;
document.getElementById("randomItem2").innerHTML=randomItem2;

  

</script>


<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

</body>

</html>

Upvotes: 0

Views: 42

Answers (2)

atakanyenel
atakanyenel

Reputation: 1375

Your code is almost correct, the only problem is you are overwriting to your document body, instead of two different divs.

You are also executing javascript before html, so it searches for elements that are not loaded. Putting javascript after the html solves that problem.

Do it like this:

<!DOCTYPE html>
<html>
<head>

</head>

<body>



<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

</body>
<script>



    var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];


  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];


  document.getElementById("randomItem1").innerHTML=randomItem1;
  document.getElementById("randomItem2").innerHTML=randomItem2;



</script>
</html>

For testing, you can add console.log(randomItem1) and console.log(randomItem2) between the lines.

Upvotes: 1

Asons
Asons

Reputation: 87313

There are 2 things that goes one, and wrong:

  1. the document.body.innerHTML = randomItem1; will overwrite the existing elements

  2. when update to e.g. document.getElementById("randomItem1").innerHTML = randomItem1;, the <script> block needs to be positioned after the elements, or else they won't be found not being parse and loaded in the DOM.

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

<script>
  var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];

  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];

  document.getElementById("randomItem1").innerHTML = randomItem1;
  document.getElementById("randomItem2").innerHTML = randomItem2;
</script>

</body>

</html>

An alternative is to use an event listener that will fire when the DOM is ready.

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<script>
  var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];

  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];

  document.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById("randomItem1").innerHTML = randomItem1;
    document.getElementById("randomItem2").innerHTML = randomItem2;

  });
</script>

<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

</body>

</html>

Upvotes: 1

Related Questions