按回车键后使按钮工作
[英]Make button work after pressing Enter key
问题描述
我有这段代码，但我希望它在单击输入按钮后完成 function“计算”。 应该怎么做？ 这个功能没有问题，但我想用输入按钮试试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
<title>Document</title>
</head>
<body>
<h3>Mini calculator</h3>
<div class="checker">
<input type="text" name="num1" placeholder="Enter first num"> <br><br>
<input type="text" name="oper" placeholder="enter operation (+,-,/,or*)"><br><br>
<input type="text" name="num2" placeholder="Enter second num"> <br><br>
<button type="submit" onclick="calculate()">Calculate</button><br><br>
<button type="submit" onclick="refreshPage()">Refresh</button>
</div>
<p id="message" class="message"></p>
</body>
</html>
这是JS源代码
function calculate(){
var a,b,c,num1,oper,num2;
a=document.getElementsByName("num1")[0].value;
num1=parseInt(a);
b=document.getElementsByName("oper")[0].value;
c=document.getElementsByName("num2")[0].value;
num2=parseInt(c);
if(b=="+"){
document.getElementById("message").innerHTML="result is: "+(num1+num2);
}
else if(b=="-"){
document.getElementById("message").innerHTML="result is: "+num1-num2;
}
else if(b=="*")
{
document.getElementById("message").innerHTML="result is: "+num1*num2;
}
else if(b=="/"){
document.getElementById("message").innerHTML="result is: "+num1/num2;
}
}
function refreshPage(){
window.location.reload();
}
3 个解决方案
解决方案1
0 已采纳 2022-09-28 20:14:42
您可以使用keypress function 执行所需的操作
document.addEventListener("keypress", event => {
if (event.keyCode == 13){
calculate();
}
})
keycode 13 适用于Enter和Intro
解决方案2
0 2022-09-28 20:28:38
您可以将输入包装在<form></form>中。 当您有一个带有 type="submit" 按钮的表单时，它会在按下回车键时自动提交。
<form id="calculatorForm">
<div class="checker">
<input type="text" name="num1" placeholder="Enter first num"> <br><br>
<input type="text" name="oper" placeholder="enter operation (+,-,/,or*)"><br><br>
<input type="text" name="num2" placeholder="Enter second num"> <br><br>
<button type="submit" onclick="calculate()">Calculate</button><br><br>
<button type="submit" onclick="refreshPage()">Refresh</button>
</div>
</form>
通过这样做，页面将在提交表单后重新加载。 为防止这种情况，您可以将其添加到您的 javascript 代码中，它不会重新加载页面。
var form = document.getElementById("calculatorForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
Jsfiddle 演示https://jsfiddle.net/szndvroe/
解决方案3
0 2022-09-28 20:30:46
如果将输入和提交按钮包装在<form>中，则Enter将“自动”工作onsubmit 。
此外，您的计算应该发生在它自己的 function 内。
const messageEl = document.getElementById('message'); const form = document.forms.calculator; const calculate = (operator, left, right) => { switch (operator) { case "+": return left + right; case "-": return left - right; case "*": return left * right; case "/": return left / right; default: return null; } }; function handleSubmit(event) { event.preventDefault(); // Interrupt the event const num1 = +form.elements.num1.value, operator = form.elements.oper.value, num2 = +form.elements.num2.value, result = calculate(operator, num1, num2); if (result.= null) { messageEl:textContent = `Result is; ${result}`; } return false; // Prevent page navigation }
form { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
<h3>Mini calculator</h3> <form name="calculator" onSubmit="handleSubmit(event)"> <div> <input type="number" name="num1" placeholder="Enter first number" step="0.01"> <input type="text" name="oper" placeholder="Enter operator (+, -, /, or *)"> <input type="number" name="num2" placeholder="Enter second number" step="0.01"> </div> <div> <button type="submit">Calculate</button> <button type="reset">Reset</button> </div> </form> <hr /> <p id="message" class="message"></p>
您还可以让您的操作员输入<select> ：
<select name="oper">
<option value="" disabled selected>Select an operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option>
</select>
用Enter键按下一个按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.