how to make js display random word from an list on a click of a button and print it in a heading 3? I need a quick reply. Please, would appreciate a quick reply
//Start of Js code
let display = document.getElementById("motivato");
console.log(display)
var motivation = [{
quote: "Planting popcorn does not produce more popcorn",
person: "Farmer Ted"
}, {
quote: "White whale, bad whale",
person: "Confucious (Moby Dick)"
}, {
quote: "Use the strobe function to disorientate your attacker",
person: "Flashlight"
}, {
quote: "Apply liberally to your erogenous zones",
person: "Spice Bomb"
}, {
quote: "Help me, I'm bleaching",
person: "The Great Barrier Reef"
}];
function motivateMe() {
var listLength = Object.keys(motivation).length;
var randVal = Math.floor(Math.random() * listLength);
document.write(motivation[randVal]);
display.innerHTML = motivation;
}
Please edit my code and reply below
Thanks
I'm going to assume you meant you wanted to generate a random quote and not just one word.
Here's the answer:
const motivation = [{
quote: "Planting popcorn does not produce more popcorn",
person: "Farmer Ted"
}, {
quote: "White whale, bad whale",
person: "Confucious (Moby Dick)"
}, {
quote: "Use the strobe function to disorientate your attacker",
person: "Flashlight"
}, {
quote: "Apply liberally to your erogenous zones",
person: "Spice Bomb"
}, {
quote: "Help me, I'm bleaching",
person: "The Great Barrier Reef"
}];
const randomNumber = Math.floor(Math.random() * motivation.length);
console.log(motivation[randomNumber]);
const generate_quote = () => {
const quote = motivation[randomNumber].quote;
document.getElementById("random_quote").innerHTML = quote;
}<p id="random_quote">The random quote will appear here.</p>
<button onclick="generate_quote()">Generate random quote</button>const display = document.getElementById("motivato");
const motivation = [{
quote: "Planting popcorn does not produce more popcorn",
person: "Farmer Ted"
}, {
quote: "White whale, bad whale",
person: "Confucious (Moby Dick)"
}, {
quote: "Use the strobe function to disorientate your attacker",
person: "Flashlight"
}, {
quote: "Apply liberally to your erogenous zones",
person: "Spice Bomb"
}, {
quote: "Help me, I'm bleaching",
person: "The Great Barrier Reef"
}];
function motivateMe() {
const listLength = motivation.length;
const randVal = motivation[Math.floor(Math.random() * listLength)];
display.innerHTML = `<q>${randVal.quote}</q><br><br><small>${randVal.person}</small>`;
}<button onclick="motivateMe()">Motivate me!</button>
<h3 id="motivato"></h3>Now you need to edit the above to make sure that a button press doesn't return the same quote as the previous one, as when it does it seems like the button doesn't work.