使用用户输入作为Javascript中的变量？

Question

我正在尝试制作一个示例网页，要求用户输入整数，如果该整数在1到12之间，它将返回圣诞节的相应日期（圣诞节的第8天：有8位女仆挤奶，等等）。

我对javascript不太有经验，但是我不知道有任何其他方法可以使程序在html中工作。 不幸的是，Python不是一个选择。 我在尝试收集用户提供的整数作为网页随后显示的变量时遇到了麻烦。 我的代码如下。 任何帮助或建议，我们将不胜感激。

<!>
<html>
<head>
<title> Merry Christmas! </title>
</head>
<body>
<input type="number" id="inputfield1" name="inputfield1" />
<input type="submit" id="Submit" text="Submit" onclick="compute()" />
<script type = "text/javascript">

function compute(){
    var cday = document.getElementByName("inputfield1");
    document.write(cday);
}
</script>
</body>
</html>

Answer 1

document.getElementByName不存在。 您可以使用document.getElementById("inputfield1")或document.getElementsByName("inputfield1")[0]

那么您将拥有一个dom元素，而不是输入值，您可以使用该元素的value属性访问该值：

var cday = document.getElementById("inputfield1").value;

Answer 2

页面的问题是您需要根据其ID获取输入的值。

var cday = document.getElementById("inputfield1").value;

更好的解决方案是将事件监听器添加到您的输入中。 今天，onclick属性并不是最佳实践，事件侦听器是更广泛接受的解决方案。 这是一个例子：

 <!DOCTYPE html> <html> <body> <input type="number" id="inputInteger" /> <input type="submit" id="btnSubmit" text="Submit" /> <p id="result"></p> <script type = "text/javascript"> // Event Listener that Runs "Compute()" on a Click document.getElementById("btnSubmit").addEventListener("click", compute); // Gets Input Value and Displays it in a <p> function compute() { var day = document.getElementById("inputInteger").value; document.getElementById("result").innerHTML = day; } </script> </body> </html>

Answer 3

您要使用DOM元素的value字段：

<html>
    <head>
        <title> Merry Christmas! </title>
        <meta charset="utf-8" /> <!-- you don't have to do that, but it can help when you are to lazy using the `&...;` escapes -->
    </head>
    <body>
        <input type="number" id="inputfield1" id="inputfield1" />
        <input type="submit" id="Submit" text="Submit" onclick="compute()" />
        <script type="text/javascript">
            function compute() {
                var cday = document.getElementById("inputfield1").value;
                document.write(cday);
            }
        </script>
    </body>

我在这里使用了ID，因为多个元素可以具有相同的名称。 如果仍要使用name ，则将id="..."替换为name="..." （与之前一样），并将document.getElementById("...").value替换为document.getElementsByName("...")[0].value 。

使用用户输入作为Javascript中的变量？

问题描述

3 个解决方案

解决方案1
1 2016-12-22 14:33:40

解决方案2
1 已采纳 2016-12-22 14:57:19

解决方案3
0 2016-12-22 14:36:13

使用用户输入作为Javascript中的变量？

问题描述

3 个解决方案

解决方案1 1 2016-12-22 14:33:40

解决方案2 1 已采纳 2016-12-22 14:57:19

解决方案3 0 2016-12-22 14:36:13

解决方案1
1 2016-12-22 14:33:40

解决方案2
1 已采纳 2016-12-22 14:57:19

解决方案3
0 2016-12-22 14:36:13