如何生成随机数并将其分配给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标记。理论上听起来不错。但是，当我去点击按钮的时候，没有什么是有效的。即使我手动分配一个响应，假设答案= responses5，什么都不会发生。我在这里错过了什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-23 00:19:24
您的代码中有一些错误。当您使用$('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是用来替换元素，而不是文本，所以我也改变了它。
Stack Overflow用户
发布于 2017-09-23 00:19:29
您的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>
Stack Overflow用户
发布于 2017-09-23 00:19:15
您的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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46374767
复制相关文章
相似问题
腾讯云开发者
