如何在 JavaScript 中生成一个随机数并将其分配给我的变量数组？答案

【问题标题】：How to generate a random number and assign it to my variable array in JavaScript?如何在 JavaScript 中生成一个随机数并将其分配给我的变量数组？
【发布时间】：2017-09-23 00:11:40
【问题描述】：

我需要创建一个魔术 8 球网页，当输入问题并单击按钮时，该网页会生成随机响应。到目前为止，我已经完成了 HTML 和 CSS：

$(document).ready(function() {
  $("button").click(function() {
    var answer;
    var my_num = getRandom(14);
    var responses = Array(15);
    responses[0] = "Ask again later...";
    responses[1] = "Yes";
    responses[2] = "No";
    responses[3] = "It appears to be so";
    responses[4] = "Reply is hazy, please try again";
    responses[5] = "Yes, definitely";
    responses[6] = "What is it you really want to know?";
    responses[7] = "Outlook is good";
    responses[8] = "My sources say no";
    responses[9] = "Signs point to yes";
    responses[10] = "Don't count on it";
    responses[11] = "Cannot predict now";
    responses[12] = "As I see it, yes";
    responses[13] = "Better not tell you now";
    responses[14] = "Concentrate and ask again";

    var RandNum = Math.floor(Math.random() * 14);

    var answer = responses[RandNum];

    $("#Response").replaceWith(answer);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Magic 8 Ball</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="wrapper">
    <header>
      <h1>Magic 8 Ball</h1>
    </header>
    <h3>What would you like to know?</h3>
    <input type="text" name="txtQuestion" id="txtQuestion">
    <br />
    <input type="button" id="btnAsk" value="Ask the 8 Ball">
    <h3>The 8 Ball says:</h3>
    <h3 id="Response">Ask the 8 Ball a question...</h3>
  </div>
  <script src="scripts/jquery-3.2.1.js"></script>
  <script src="scripts/my_scripts.js"></script>
</body>

</html>

我一直在研究 JavaScript，但我所做的一切似乎都没有产生任何东西！这是我的代码：

老实说，我不知道我做错了什么。我想我应该创建一个包含所有可能响应的新数组。然后我生成一个随机数，并将其分配给数组变量以给我一个随机响应。然后我用随机生成的响应替换了存在的 h3 标签。理论上听起来不错。然而，当我点击按钮时，没有任何效果。即使我手动分配响应，例如 answer = answers[5]，也不会发生任何事情。我在这里错过了什么？

【问题讨论】：

没有getRandom()函数。
谢谢巴尔玛！你会为此投赞成票！

标签： javascript jquery arrays random

【解决方案1】：

您的 html 中没有按钮元素，因此您必须将事件附加到 "#btnAsk" 并且 var my_num = getRandom(14) 将给出错误，因为 getRandom() 尚未定义，并且不是必需的。

$(document).ready(function() {
  $("#btnAsk").click(function() {
    var answer;

    var responses = Array(15);
    responses[0] = "Ask again later...";
    responses[1] = "Yes";
    responses[2] = "No";
    responses[3] = "It appears to be so";
    responses[4] = "Reply is hazy, please try again";
    responses[5] = "Yes, definitely";
    responses[6] = "What is it you really want to know?";
    responses[7] = "Outlook is good";
    responses[8] = "My sources say no";
    responses[9] = "Signs point to yes";
    responses[10] = "Don't count on it";
    responses[11] = "Cannot predict now";
    responses[12] = "As I see it, yes";
    responses[13] = "Better not tell you now";
    responses[14] = "Concentrate and ask again";

    var RandNum = Math.floor(Math.random() * 14);

    var answer = responses[RandNum];

    $("#Response").html(answer);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Magic 8 Ball</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="wrapper">
    <header>
      <h1>Magic 8 Ball</h1>
    </header>
    <h3>What would you like to know?</h3>
    <input type="text" name="txtQuestion" id="txtQuestion">
    <br />
    <input type="button" id="btnAsk" value="Ask the 8 Ball">
    <h3>The 8 Ball says:</h3>
    <h3 id="Response">Ask the 8 Ball a question...</h3>
  </div>
  <script src="scripts/jquery-3.2.1.js"></script>
  <script src="scripts/my_scripts.js"></script>
</body>

</html>

【讨论】：

我没看到他选错了，我不明白为什么它没有报告关于未定义函数的错误。
是的，我也开始这样搜索

【解决方案2】：

您的代码中有一些错误。当您使用 <input type="button"> 时，您的目标是 $('button')。更新代码如下：

$(document).ready(function() {
  var responses = [];
  responses[0] = "Ask again later...";
  responses[1] = "Yes";
  responses[2] = "No";
  responses[3] = "It appears to be so";
  responses[4] = "Reply is hazy, please try again";
  responses[5] = "Yes, definitely";
  responses[6] = "What is it you really want to know?";
  responses[7] = "Outlook is good";
  responses[8] = "My sources say no";
  responses[9] = "Signs point to yes";
  responses[10] = "Don't count on it";
  responses[11] = "Cannot predict now";
  responses[12] = "As I see it, yes";
  responses[13] = "Better not tell you now";
  responses[14] = "Concentrate and ask again";
  var answer;

  function getRandom(max) {
    return Math.floor(Math.random() * max);
  }
  $("input[type=button]").click(function() {
    var my_num = getRandom(14);
    var answer = responses[my_num];
    $("#Response").text(answer);
  });
});

在这种情况下，您不需要在 Javascript 中明确定义数组的大小。此外，您应该在此处使用responses.push，而不是显式设置项目索引，但这不是这里的破坏模式。

getRandom 未定义，可能在其他地方。 $.replaceWith 用于替换元素，而不是文本，所以我也更改了它。

【讨论】：

而不是 responses.push 或分配给索引，您应该只使用数组文字：responses = [ "blah", "blah", "blah", ...]

【解决方案3】：

你的javascript源代码应该是这样的：

$(document).ready(function() {
    var answer;
    var responses = Array(15);
    responses[0] = "Ask again later...";
    responses[1] = "Yes";
    responses[2] = "No";
    responses[3] = "It appears to be so";
    responses[4] = "Reply is hazy, please try again";
    responses[5] = "Yes, definitely";
    responses[6] = "What is it you really want to know?";
    responses[7] = "Outlook is good";
    responses[8] = "My sources say no";
    responses[9] = "Signs point to yes";
    responses[10] = "Don't count on it";
    responses[11] = "Cannot predict now";
    responses[12] = "As I see it, yes";
    responses[13] = "Better not tell you now";
    responses[14] = "Concentrate and ask again";

    $("input[type=button]").click(function() {
       var RandNum = Math.floor(Math.random() * 14);    
       var answer = responses[RandNum];    
       $("#Response").html(answer);
    });
});

应该删除var my_num = getRandom(14);，并且你应该使用html insted of replaceWith 来保留#Response div。

【讨论】：