为什么即使关闭计算器，计算器按钮仍然有反应？
[英]why do the calculator buttons still respond even when the calculator is off?
问题描述
//function for displaying values function dis(val) { document.getElementById("edu").value += val } //function for evaluation function solve() { let x = document.getElementById("edu").value // eval() is a gobal function in JavaScript and has a defined purpose of solving JavaScript codes. let y = eval(x) document.getElementById("edu").value = y } //function for clearing the display function clr() { document.getElementById("edu").value = "" } // var switch /*function toggleState(item) { if(item.className == "on") { item.className="off"; } else { item.className="on"; } }*/ // <script type="text/javascript"> function onoff() { currentvalue = document.getElementById('onoff').value; if (currentvalue == "Off") { document.getElementById("onoff").value = "On"; } else { document.getElementById("onoff").value = "Off"; } }
.title { border-radius: 1px; margin-bottom: 10px; text-align: center; width: 200px; color: purple; border: solid black 1px; } input[type="button"] { border-radius: 5px; background-color: pink; color: black; border-color: purple; width: 100%; } input[type="text"] { border-radius: 5px; text-align: right; background-color: pink; border-color: black; width: 97% }.on { background: blue; }.off { background: red; }
<,DOCTYPE html> <html> <head> <title>Calculator Using JS </title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <div class=title>WE(LAB)-ASSIGNMENT-1</div> <table border="1"> <tr> <;-- <td><input type="button" value="c" onclick="clr()"/> </td> --> <td style="width; 200px". colspan="5"><input type="text" id="edu" name="edu" disabled /> <.-- <input type="text" name="display" id="display" disabled> --> </td> </tr> <tr> <.-- creating buttons and assigning values--> <td><input type="button" value="1" onclick="dis('1')" /> </td> <td><input type="button" value="2" onclick="dis('2')" /> </td> <td><input type="button" value="3" onclick="dis('3')" /> </td> <td><input type="button" value="+" onclick="dis('+')" /> </td> <td><input type="button" value="On" id="onoff" onclick="onoff()."></td> </tr> <tr> <td><input type="button" value="4" onclick="dis('4')" /> </td> <td><input type="button" value="5" onclick="dis('5')" /> </td> <td><input type="button" value="6" onclick="dis('6')" /> </td> <td><input type="button" value="-" onclick="dis('-')" /> </td> <td><input type="button" value="AC" onclick="clr()" /> </td> <!-- clr() function will call clr to clear all value --> </tr> <tr> <td><input type="button" value="7" onclick="dis('7')" /> </td> <td><input type="button" value="8" onclick="dis('8')" /> </td> <td><input type="button" value="9" onclick="dis('9')" /> </td> <td><input type="button" value="*" onclick="dis('*')" /> </td> <td><input type="button" value="!" onclick="dis('!')" /> </td> </tr> <tr> <td><input type="button" value="." onclick="dis('.')" /></td> <td><input type="button" value="0" onclick="dis('0')" /> </td> <td><input type="button" value="/" onclick="dis('/')" /> </td> <!-- <td><input type="button" class="operator" name="Modulus" value="%" onclick="calculator.edu.value += '%'"></td> --> <td><input type="button" value="%" onclick="dis('%')" /> </td> <td><input type="button" value="=" onclick="solve()" /> </td> </tr> </table> </body> </html>
How can I add on/off button in calculator (using html and javascript) so that if it's on, then we can able to press any other buttons and can't press any other button otherwise.
如何在计算器中添加开/关按钮（使用 html 和 javascript），以便如果它打开，那么我们可以按任何其他按钮，否则不能按任何其他按钮。 I am adding on/off function but the problem is that if the button is in any condition on/off the other button are being press.我正在添加开/关 function 但问题是，如果按钮处于任何开/关状态，则正在按下另一个按钮。
2 个解决方案
解决方案1
2 2020-06-05 15:17:43
First of all I would use the <button> element instead of the<input> element.首先，我将使用<button>元素而不是<input>元素。
You want the input HTML elements to be disabled according to a condition (If the user clicked on OFF ).您希望根据条件禁用input HTML 元素（如果用户单击OFF ）。
When the user toggles between On/Off, JS will go through all the relevant input elements and either together enable or disable them.当用户在 On/Off 之间切换时，JS 将通过所有相关的输入元素 go 并一起启用或禁用它们。 This can be achieved with this code:这可以通过以下代码实现：
function onoff()
{
const powerBtn = document.getElementById('onoff');
const powerOn = powerBtn.value === "Off";
if(powerOn)
{
powerBtn.value="On";
}
else
{
powerBtn.value="Off";
}
const htmlCollection = document.getElementsByTagName("input");
const inputElements = [...htmlCollection];
inputElements.filter(input => input !== powerBtn) // we don't want to affect the toggle button itself which is also an input
.forEach(input => input.disabled = !powerOn);
}
解决方案2
0 2020-06-05 15:51:23
One way to solve it would be:解决它的一种方法是：
declare 'currentvalue' at the top of the script before putting it into a function using var - by using a var outside of a function, you are allowing it to be accessed anywhere in the script.
在使用 var 将其放入 function 之前，在脚本顶部声明“currentvalue” - 通过在 function 之外使用 var，您可以在脚本中的任何位置访问它。create if statements on each function so that the relevant code will only fire if 'currentvalue' is 'On.
在每个 function 上创建 if 语句，以便相关代码仅在“currentvalue”为“On”时触发。
here is an idea of the code:这是代码的一个想法：
var currentvalue = "Off";
function dis(val) {
if(currentvalue == "On")
document.getElementById("edu").value += val
}
Repeat the if statement for each of your functions.对每个函数重复 if 语句。
I am not sure if this is the most eloquent of solutions but it works.我不确定这是否是最 eloquent 的解决方案，但它有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.