如何在 Javascript 中创建用户文本输入和输出答案

【问题标题】：How to create user text input and output in Javascript如何在 Javascript 中创建用户文本输入和输出
【发布时间】：2016-03-04 05:40:46
【问题描述】：

我是编码新手，但我需要您的帮助。我需要创建一个表单，允许用户输入问题，例如=我应该买一辆新车吗？然后在一个新的盒子里，他们会列出他们的问题的五个解决方案（1. 多存点，2. 等待，3. 租赁，4. 修好当前的汽车 5. 买一辆二手车。然后，一旦他们这样做了，他们按下提交并随机选项消失了。这可能来自 Java 脚本吗？正确的语法是什么？提前感谢您的帮助，如果令人困惑，我会尽力澄清。

【问题讨论】：

"我需要创建一个表单" ...是的，你需要创建一个表单。它在哪里？到目前为止你尝试过的 JS 在哪里？
@Teemu 据我了解，该表单将插入到 html 的 head 标签中。但说实话我不知道从哪里开始。我寻找演示来帮助，但它的全名输入而不是我正在寻找的。span>
head 中的表单？不，在body。你必须先学习HTML 的基础知识，然后你就会遇到问题。我们不会为您从头开始编写所有代码。
正如我所说，我是编码新手。我了解您不会这样做，只是在特定问题上寻求帮助。你告诉我学习基础不是那样的。不过谢谢。 @Teemu

标签： javascript html forms

【解决方案1】：

请检查以下示例。希望对你有帮助：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function showOptionBox()
{
    document.getElementById("optionBox").style.display="";
}
function showRandomAnswer()
{
    //alert(Math.floor(Math.random() * (5)) + 1);
    var randomOption=Math.floor(Math.random() * (5)) + 1;
    for(var i=1;i<=5;i++)
    {
        if(randomOption != i)
        {
            document.getElementById("opt"+i).style.display="none";
        }
    }
}
</script>
</head>
<body>
    <fieldset><legend>Enter your question:</legend>
        Question:<input type="text" id="question" /><br>
        <input type="button" onclick="showOptionBox();" value="Submit Question">
    </fieldset>

    <div id="optionBox" style="display: none">
        <fieldset><legend>Enter your options:</legend>
        <div id="opt1">Option 1:<input type="text"/></div><br>
        <div id="opt2">Option 2:<input type="text"/></div><br>
        <div id="opt3">Option 3:<input type="text"/></div><br>
        <div id="opt4">Option 4:<input type="text"/></div><br>
        <div id="opt5">Option 5:<input type="text"/></div><br>
        <input type="button" onclick="showRandomAnswer();" value="Show Random Answer"/>
    </fieldset>
    </div>
</body>
</html>

【讨论】：

非常感谢您抽出宝贵时间回复。这是完美的，感谢您为显示代码所做的努力。那意义重大！ @sAm 不，我可以更好地了解这是如何工作的。
有没有办法在其中添加 CSS？我试过了，但是我没有看到任何变化，它说的是用户代理样式表。
经过一些研究和反复试验，CSS 正在工作。再次感谢您的帮助。