尝试创建一个随机文字游戏，通过单击 html 按钮输出一个函数答案

【问题标题】：Trying to create a random word game that will output a function with a click of an html button尝试创建一个随机文字游戏，通过单击 html 按钮输出一个函数
【发布时间】：2020-09-12 06:17:09
【问题描述】：

我正在尝试创建一个文字游戏，该游戏将从列表中随机选择一个项目，但有些项目的权重不同，因此它们出现的频率较低。我希望在用户按下 HTML 按钮后调用该函数。我的代码现在工作得很好（到控制台）。我的问题是如何将函数的输出获取到 html 网页中。如果有人可以帮助我，那将是一个巨大的帮助。

这是我的代码：

var item = {
    'apple':10,
    'banana':10,
    'orange':10,
    'grapes':1,
}

function testGame(input) {
    var array = [];
        for(var item in input) {
            if(input.hasOwnProperty(item) ) {
                for(var i=0; i<input[item]; i++ ) {
                    array.push(item);
                }
            }
        }
        return array[Math.floor(Math.random() * array.length)];
}

console.log(testGame(item));

我也有一些 HTML 代码，只是不知道在哪里或如何正确编写按钮代码以产生我正在寻找的结果。

这是 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Randomizer Game</title>
</head>
<body>
  <h1>Game</h1>   
  <script src="index.js"></script>
  <button onclick="testGame();">Test</button>
</body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以创建新功能，您可以在按钮上调用它，就像您使用 console.log 调用它一样：

<button onclick="start();">Test</button>

并在里面调用你的随机化函数：

function start() {
  testGame(item)
}

然后在function testGame里面不要使用return，只是将随机单词结果保存在变量中并用HTML打印出来：

  var result = array[Math.floor(Math.random() * array.length)];
  console.clear();
  console.log(result);
  document.getElementById("result").innerHTML=result;

我在 HTML 中添加了 div 结果：

<div id="result"></div>

示例片段：

var item = {
  'apple': 10,
  'banana': 10,
  'orange': 10,
  'grapes': 1,
}

function testGame(input) {

  var array = [];
  for (var item in input) {
    if (input.hasOwnProperty(item)) {
      for (var i = 0; i < input[item]; i++) {
        array.push(item);
      }
    }
  }
  var result = array[Math.floor(Math.random() * array.length)];
  console.clear();
  console.log(result);
  document.getElementById("result").innerHTML=result;
  
}

function start() {
  testGame(item)
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Randomizer Game</title>
</head>

<body>
  <h1>Game</h1>
  <div id="result"></div>
  <script src="index.js"></script>
  <button onclick="start();">Test</button>
</body>

</html>

【讨论】：

@briannelson95 太好了，请考虑在✔︎上将答案标记为已接受，以将其标记为已解决。欢迎来到 SO。

【解决方案2】：

使用getElementById 通过 id 获取元素，为此我给了你的按钮一个 id。使用addEventListener，您可以添加一个事件（此处：单击）以调用一个函数。
在这里做你的随机化。使用getElementById再次获取您想要输出的元素，并使用textContent添加您的答案。

const ITEMS = {
    'apple':10,
    'banana':10,
    'orange':10,
    'grapes':1,
}

document.getElementById('btn').addEventListener('click', function testGame() {
    var array = [];
    for(var item in ITEMS) {
      if(ITEMS.hasOwnProperty(item) ) {
        for(var i=0; i<ITEMS[item]; i++ ) {
          array.push(item);
        }
      }
    }
    document.getElementById('item').textContent = array[Math.floor(Math.random() * array.length)];
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Randomizer Game</title>
</head>
<body>
  <h1>Game</h1>   
  <button id='btn'>Test</button>
  <div id='item'></div>
</body>
</html>

【讨论】：