Random output from array 1 output instead of 2

Question

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>

As the other answerer got it right now, and were first to answer, may I suggest you change mine to an upvote and accept the other? — Asons
– Asons, Commented Jul 7, 2018 at 22:08

atakanyenel · Accepted Answer · 2018-07-07 23:25:47Z

1

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.

edited Jul 7, 2018 at 23:25

answered Jul 7, 2018 at 20:32

atakanyenel

1,3851 gold badge15 silver badges20 bronze badges

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

7 Comments

Reginald1234 Over a year ago

Thanks for your respond, I got this error Uncaught TypeError: Cannot set property 'innerHTML' of null.

atakanyenel Over a year ago

This is strange, I tried it now, and it works, are you sure that you are not making a typo with ids.

Reginald1234 Over a year ago

I've edited my question's snippets you can also see the error in there

atakanyenel Over a year ago

Okey, Fixed it. Always put your <script> at the end of the </body> . So either as last block before the </body> or between </body> and </html>. Your scripts should execute after html is loaded, so that your document.getElementById can actually find the elements :D

Asons Over a year ago

@atayenel Add that to your answer, where it belongs.

|

Asons · Accepted Answer · 2018-07-07 21:11:11Z

There are 2 things that goes one, and wrong:

the document.body.innerHTML = randomItem1; will overwrite the existing elements
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>

Collectives™ on Stack Overflow

Random output from array 1 output instead of 2

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related