Question

我需要创建一个魔术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标签。听起来不错。然而，当我点击按钮时没有任何作用。即使我手动分配了一个响应，比如回答=回复[5]，也没有任何反应。我在这里缺少什么？

Answer 1

你的html中没有按钮元素，所以你必须将事件附加到"#btnAsk"，var my_num = getRandom(14)也会出错，因为getRandom（）尚未定义，并且不是必需的。

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

Answer 2

您的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 replaceWith {{}}}来保留#Response div。

Answer 3

您的代码中存在一些错误。您在使用$('button')时定位<input type="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用于替换元素，而不是文本，因此我也改变了它。

如何生成随机数并将其分配给JavaScript中的变量数组？

3 个答案: