Presenting a Random Term from an Array in Dual Locations

Question

Presenting a Random Term from an Array in Dual Locations

<input type="button" id="btnSearch" value="Search" onclick="myFunction();" />
<div id="message">
    <p></p>
</div>
<br>
<div id="message">
    <p></p>
</div>


<script type="text/javascript">
    function myFunction() {
        var myarray= new Array ("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");

        var random1 = myarray[Math.round(Math.random() * (myarray.length - 1))];
        var random2 = myarray[Math.round(Math.random() * (myarray.length - 1))];

        var display = document.getElementById("message").innerHTML = random1 + ", " + random2;
    }
</script>

I have this script set up and I'm aiming to show two randomly selected words from my array next to each other when the button is clicked. Any assistance will be greatly appreciated!

https://jsfiddle.net/edexxmjo/

javascript arrays button random

Answer 1

Answer №1

Perhaps this solution could work

<button type="button" id="myBtn">Click Me</button>
<div id="message1">
</div>
<br>
<div id="message2">
</div>

Here's a bit of JavaScript

document.getElementById("myBtn").addEventListener("click", handleClick);

function handleClick(event) {
    event.preventDefault();
    document.getElementById("message1").innerHTML = generateWord();
    document.getElementById("message2").innerHTML = generateWord();
}

function generateWord(){
    var wordList = new Array("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");

    return wordList[Math.round(Math.random() * (wordList.length - 1))];
}

Answer 2

Perhaps this solution could work

<button type="button" id="myBtn">Click Me</button>
<div id="message1">
</div>
<br>
<div id="message2">
</div>

Here's a bit of JavaScript

document.getElementById("myBtn").addEventListener("click", handleClick);

function handleClick(event) {
    event.preventDefault();
    document.getElementById("message1").innerHTML = generateWord();
    document.getElementById("message2").innerHTML = generateWord();
}

function generateWord(){
    var wordList = new Array("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");

    return wordList[Math.round(Math.random() * (wordList.length - 1))];
}

Answer 3

Answer №2

id is special and unique. If you want to display content in multiple places, you can either use the class selector or create another unique id as shown below:

<div id="message">     
</div>
<br>
<div id="message_2">      
</div>

<script type="text/javascript">
    function myFunction() {
    var myarray= new Array ("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");

    var random = myarray[Math.round(Math.random() * (myarray.length - 1))]

    document.getElementById("message").innerHTML=random;
    document.getElementById("message_2").innerHTML=random;
    }
</script>

To Get Elements by ID, Tag, Name, Class, CSS Selector

Answer 4

id is special and unique. If you want to display content in multiple places, you can either use the class selector or create another unique id as shown below:

<div id="message">     
</div>
<br>
<div id="message_2">      
</div>

<script type="text/javascript">
    function myFunction() {
    var myarray= new Array ("Drama", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folklore", "Historical Fiction", "Horror", "Humor", "Mystery", "Mythology", "Poetry", "Realistic Fiction", "Science Fiction", "Short Story", "Tall Tale");

    var random = myarray[Math.round(Math.random() * (myarray.length - 1))]

    document.getElementById("message").innerHTML=random;
    document.getElementById("message_2").innerHTML=random;
    }
</script>

To Get Elements by ID, Tag, Name, Class, CSS Selector

Presenting a Random Term from an Array in Dual Locations

Answer №1

Answer №2

Similar questions

Tips for increasing efficiency in Javascript development by leveraging the power of the computer to automate tasks and minimize manual work

"Having trouble with sound in react-native-sound while playing audio on an Android AVD? Discover the solution to fix this

Press the button to access the URL within the current window

A guide to implementing X-Frame-Options in an express.js web application using node.js

Is there a way to transform a callback into promises using async/await, and convert a prototype function into a standard

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

Guide to building a React project with an outdated edition of Create React App

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

Tips for transferring canvas information from JavaScript to Django using Ajax

Transforming JavaScript to TypeScript in Angular: encountering error TS2683 stating that 'this' is implicitly of type 'any' due to lacking type annotation

Switching to fullscreen mode and eliminating any applied styles

Creating a function that uses setInterval to continuously update the input with a specific value

JQuery does not operate on content that is fetched through ajax requests

Exploring a JavaScript multi-dimensional array

Ensure that an HTML table row remains fixed on the screen at all times

What is the best way to address Peer dependency alerts within npm?

Creating a distinctive vue form component from scratch

Managing input/output requests on Amazon EC2 instances

What could be the reason behind the login button not triggering the console message display?

What could be causing my JavaScript code to not function properly in an HTML document?