JS Magic 8球游戏输出
JS Magic 8球游戏输出
提问于 2018-10-17 00:24:14
我正在创建一个魔术8球游戏，但我在格式化输出时遇到了问题。我的程序选择随机答案，并按需要输出它。用户输入他们的名字和问题，我想要的输出是name + inputted question +的答案+随机生成的答案。如何将这些元素连接在一起以格式化输出。我尝试过使用+，但它会使我的输出消失。
<!DOCTYPE html>
<!-- =================================================== -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="../myStyles/styles.css">
<title> Magic 8 Ball </title>
<meta charset = "UTF-8">
</head>
<script>
function GenerateAnswer()
{
var responses = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes definitely',
'You may rely on it',
'As I see it, yes',
'Most likely',
'Outlook good',
'yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
'Do not count on it',
'My reply is no',
'My sources say no',
'Outlook not so good',
'Very doubtful',
];
var choice = responses[Math.floor(Math.random()*responses.length)];
document.getElementById("response").innerHTML = choice
}
</script>
<body>
<h1 style = "text-align:left;">Magic 8 Ball...</h1>
<h2 style = "text-align:left;">Ask me a question and I will predict if it will become true!</h2>
<p style = "text-align:left;">Please enter your name:</p>
<input type = "text" id="nameBox" size=100 value= ''>
<h2 id = "name"></h2>
<p style = "text-align:left;">What is your question?</p>
<input type="text" id="questionBox" size=100 value=''>
<input type="button" id="submit" value = "Ask me a question" onclick="GenerateAnswer()" ;>
<h2 id = "response"></h2>回答 2
Stack Overflow用户
发布于 2018-10-17 00:31:54
您需要从id #nameBox中获取名称并将其运行到您的innerHTML中。
function GenerateAnswer()
{
var responses = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes definitely',
'You may rely on it',
'As I see it, yes',
'Most likely',
'Outlook good',
'yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
'Do not count on it',
'My reply is no',
'My sources say no',
'Outlook not so good',
'Very doubtful',
];
var choice = responses[Math.floor(Math.random()*responses.length)];
var name = document.querySelector("#nameBox").value;
document.getElementById("response").innerHTML = name + ', The answer to your question is: ' + choice
} <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../myStyles/styles.css">
<title> Magic 8 Ball </title>
<meta charset = "UTF-8">
</head>
<body>
<h1 style = "text-align:left;">Magic 8 Ball...</h1>
<h2 style = "text-align:left;">Ask me a question and I will predict if it will become true!</h2>
<p style = "text-align:left;">Please enter your name:</p>
<input type = "text" id="nameBox" size=100 value= ''>
<h2 id = "name"></h2>
<p style = "text-align:left;">What is your question?</p>
<input type="text" id="questionBox" size=100 value=''>
<input type="button" id="submit" value = "Ask me a question" onclick="GenerateAnswer()" ;>
<h2 id = "response"></h2>
Stack Overflow用户
发布于 2018-10-17 00:36:39
下面是我对你想要实现的目标的理解：
function makeOutput(userName, generatedChoice, inputtedQuestion) {
// You can avoid this if statement if you don't require it.
if(!userName || !generatedChoice || inputtedQuestion) return null;
return `${userName} The answer to ${inputtedQuestion} is ${generatedChoice}`
}如果你觉得这个语法很奇怪，那就是模板文字，它是ES2015的一个特性。检查here
然后调用
makeOutput('Name', 'It is certain') // Name The answer to inputted question is It is certain。
当然，参数应该是动态的，这意味着从html元素获取name和question！
如果这还不清楚，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52839977
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号