执行函数后更改随机生成的单词答案

【问题标题】：Change random generated word after function is executed执行函数后更改随机生成的单词
【发布时间】：2018-11-21 00:07:51
【问题描述】：

我目前正在开发一个程序，您喜欢或不喜欢屏幕上显示的活动。我的问题：我希望随机生成的单词在点击不喜欢的输入或点击不喜欢的输入后发生变化。

这是我的 Javascript 代码：

let words = ['Food', 'Video Games', 'Movies', 'Spa', 'Sleeping'];
let word = words[Math.floor(Math.random()*words.length)];

document.getElementById("word").innerHTML = word;

function ai(){
  document.getElementById("liked").innerHTML = "LIKED";
  document.getElementById("disliked").innerHTML = "";
}

function aii(){
  document.getElementById("disliked").innerHTML = "DISLIKED";
  document.getElementById("liked").innerHTML = "";
}

这是我的 HTML 代码：

<h1 id="word"></h1>
<h1 id="liked"></h1>
<h1 id="disliked"></h1>
<input type="image" src="thumbsup.png" class="tu" onclick="ai()">
<input type="image" src="thumbsdown.png" class="td" onclick="aii()">

提前致谢！

【问题讨论】：

标签： javascript html function random

【解决方案1】：

只需将随机生成移动到函数中即可。您可以创建一个执行随机生成的函数，然后在 onclick 函数中调用该函数

let words = ['Food', 'Video Games', 'Movies', 'Spa', 'Sleeping'];

function random_generate(){
  let word = words[Math.floor(Math.random()*words.length)];
  document.getElementById("word").innerHTML = word;

}
function ai(){
  random_generate();
  document.getElementById("liked").innerHTML = "LIKED";
  document.getElementById("disliked").innerHTML = "";
}

function aii(){
  random_generate();
  document.getElementById("disliked").innerHTML = "DISLIKED";
  document.getElementById("liked").innerHTML = "";
}

<h1 id="word"></h1>
<h1 id="liked"></h1>
<h1 id="disliked"></h1>
<input type="image" src="thumbsup.png" class="tu" onclick="ai()">
<input type="image" src="thumbsdown.png" class="td" onclick="aii()">

【讨论】：

完美！非常感谢！

【解决方案2】：

只要把随机词的生成变成一个函数，

function generate_random() {
  let word = words[Math.floor(Math.random()*words.length)];
  document.getElementById("word").innerHTML = word;   
}

然后在脚本开头或构造函数中调用此函数（取决于您使用的框架），然后只需在 ai() 和 aii() 中添加函数调用

function ai(){
  document.getElementById("liked").innerHTML = "LIKED";
  document.getElementById("disliked").innerHTML = "";
  generate_random();
}

function aii(){
  document.getElementById("disliked").innerHTML = "DISLIKED";
  document.getElementById("liked").innerHTML = "";
  generate_random();
}

【讨论】：

【解决方案3】：

您仅在声明时选择了一个随机词，并且只是更改了文本 onClick。

您应该创建一个函数来选择随机单词onClick，如下所示：

const pickWord = () => words[Math.floor(Math.random()*words.length)];

function ai(){
  document.getElementById("liked").innerHTML = "LIKED";
  document.getElementById("disliked").innerHTML = "";
  document.getElementById("word").innerHTML = pickWord();
}

【讨论】：