Instead of outputting from array 2, a random output is chosen from array 1

Question

Instead of outputting from array 2, a random output is chosen from array 1

How can I modify this code to output 2 distinct random array objects instead of just 1? I've tried so far but it only displays a single output. What could be the reason for this issue?

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

javascript

Answer 1

Answer №1

Your solution is almost correct, but there are a few improvements you can make. Instead of overwriting your document body, consider creating two separate divs to display your random items.

Ensure that your JavaScript code is placed after the HTML content to avoid searching for elements before they are loaded on the page. Here's a revised version of your code:

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

To test your code, you can use console.log(randomItem1) and console.log(randomItem2) in between the lines.

Answer 2

Your solution is almost correct, but there are a few improvements you can make. Instead of overwriting your document body, consider creating two separate divs to display your random items.

Ensure that your JavaScript code is placed after the HTML content to avoid searching for elements before they are loaded on the page. Here's a revised version of your code:

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

To test your code, you can use console.log(randomItem1) and console.log(randomItem2) in between the lines.

Answer 3

Answer №2

Two things are happening, one right and one wrong:

Using
```
document.body.innerHTML = randomItem1;
```
will overwrite the existing elements
When updating to something like
```
document.getElementById("randomItem1").innerHTML = randomItem1;
```
, the <script> block must be placed after the elements in order for them to be loaded and parsed 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 approach is to utilize an event listener that triggers when the DOM has finished loading.

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

Answer 4

Two things are happening, one right and one wrong:

Using
```
document.body.innerHTML = randomItem1;
```
will overwrite the existing elements
When updating to something like
```
document.getElementById("randomItem1").innerHTML = randomItem1;
```
, the <script> block must be placed after the elements in order for them to be loaded and parsed 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 approach is to utilize an event listener that triggers when the DOM has finished loading.

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

Instead of outputting from array 2, a random output is chosen from array 1

Answer №1

Answer №2

Similar questions

Implementing multiple perspectives on a single webpage by keeping track of the browsing history with AngularJS and leveraging the

The element type provided is not valid: it should be a string (for built-in components) or a class/function. Utilizing SSR with Node.js, React, and React-

Permanently dismiss Bootstrap 4 alert using a cookie

Update the nested radio button to a new value

Vue Router Guard Failing to Work Properly After Page Reload

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Is there a way I can sort an array by checking if a key exists in an object?

Node.js and MySQL: Troubles with closing connections - Dealing with asynchronous complexities

Function for Duplicating jQuery Events

Click on a React component to receive its property

Exploring Amcharts using detailed JSON data

jPlayer - Utilize the setMedia() function to define the media source URL

Animating Three.js OrbitControls to smoothly rotate and face the front of a target object

internet explorer causing issues with .html() method

Ways to extract pertinent information from a PHP API

What is the process for retrieving data from mongoDB and displaying it by year in a single row?

What is the best way to secure the installation of python packages for long-term use while executing my code within a python shell on NodeJS?

Transmitting data to a PHP script via AJAX and receiving a delayed response is not ideal for my needs

What is the best way to integrate Google Maps into a Vue component?

This function named error is implemented in native code