javascript - 在 Javascript 中使用用户输入作为变量?

标签 javascript html

我正在尝试制作一个示例网页,要求用户输入一个整数,如果它在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>

最佳答案

您的页面的问题是您需要根据输入的 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> 

关于javascript - 在 Javascript 中使用用户输入作为变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41285431/

相关文章:

html - 占位符文本未出现在文本区域中

javascript - 简单的 JavaScript 测验数组问题

javascript - SQLDependency OnChange 事件产生无限循环

javascript - 无法在 javascript jQuery 中获取点击事件

javascript - getElementsByClassName 是否保持排序?

php忽略重定向if语句

html - 横幅图片涵盖了电子商务故事中的侧推车。如何防止这种情况?

javascript - 来自 Controller 的 Angular 对象未在 html 中显示

javascript - 使用 PHP 设置焦点并选择错误的内容元素

html - iframe 是否被视为 'bad practice' ?