如何让js在单击按钮时显示列表中的随机单词并将其打印在标题3中答案

【问题标题】：how to make js display random word from an list on a click of a button and print it in a heading 3如何让js在单击按钮时显示列表中的随机单词并将其打印在标题3中
【发布时间】：2022-01-01 17:33:56
【问题描述】：

如何让js通过单击按钮从列表中显示随机单词并将其打印在标题3中？我需要快速回复。请尽快回复

//Js代码开始

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;
}

请编辑我的代码并在下方回复

谢谢

【问题讨论】：

澄清一下，您是要从对象中打印随机词还是随机对象？
您可能不想使用 document.write（除非您真的想全部写出来）。为什么下面的行试图将整个动机放入innerHTML而不是选定的引用？

标签： javascript html css bootstrap-4

【解决方案1】：

我假设您的意思是要生成一个随机引用，而不仅仅是一个单词。

答案如下：

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>

【讨论】：

【解决方案2】：

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>

现在您需要编辑上面的内容，以确保按下按钮不会返回与前一个相同的引号，因为当它出现时，按钮似乎不起作用。

【讨论】：