Question

我正在创建一个神奇的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>

Answer 1

您需要从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>

Answer 2

这是我了解您要达到的目标的方法：

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！

让我知道是否不清楚。

JS Magic 8球类游戏输出

2 个答案: