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

CodePudding user response：

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>

CodePudding user response：

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.