如何在javascript计算器中检测和存储命中运算符前后的数字？
这个项目必须是每个人都想做的最常见的项目。我已经按照Udemy上的教程完成了。但是现在我想用我自己的逻辑和解决问题的策略做一个计算器 问题-：我的计算器应用程序目前有两个问题。 1） 用户只能输入1位数字进行计算。我希望它能适用于10位数字。 2） 使按钮工作。 我会尽力让你理解这个问题，因为它有点不同。 例如-： 用户输入数字12 然后他按+ 然后他按16 预期产出-： 发生12+16加法，输出端出现28 当前问题-： 首先，用户甚至不能输入12。他一次只能输入一位数字。 此外，当他按下加法键时，没有进行计算的函数，因为我在考虑如何在他按下任何运算符之前和之后检测用户输入，然后将其保存到一些变量中，并根据运算符执行操作。 我现在的代码-：如何在javascript计算器中检测和存储命中运算符前后的数字？,javascript,html,css,Javascript,Html,Css,这个项目必须是每个人都想做的最常见的项目。我已经按照Udemy上的教程完成了。但是现在我想用我自己的逻辑和解决问题的策略做一个计算器 问题-：我的计算器应用程序目前有两个问题。 1） 用户只能输入1位数字进行计算。我希望它能适用于10位数字。 2） 使按钮工作。 我会尽力让你理解这个问题，因为它有点不同。 例如-： 用户输入数字12 然后他按+ 然后他按16 预期产出-： 发生12+16加法，输出端出现28 当前问题-： 首先，用户甚至不能输入12。他一次只能输入一位数字。 此外，当他按下加法键
计算器
输入
{
高度：100px；
宽度：150px；
边界半径：10px；
边框样式：无；
背景色：黑色；
颜色：白色；
}
.abcde
/*供展示之用*/
{
背景颜色：蓝色；
高度：100px；
宽度：608px；
边界半径：10px；
颜色：白色；
字体大小：100px；
}
基本计算器
//函数clearfunc（）
// {
//document.getElementById（“abcd”）.innerHTML=“0”；
// }
功能显示（id）
{
如果（id=“零”）
document.getElementById（“abcd”）.innerHTML=“0”；
如果（id=“一”）
document.getElementById（“abcd”）.innerHTML=“1”；
如果（id=“两个”）
document.getElementById（“abcd”）.innerHTML=“2”；
如果（id=“正”）
document.getElementById（“abcd”）.innerHTML=“+”；
如果（id=“三”）
document.getElementById（“abcd”）.innerHTML=“3”；
如果（id=“四”）
document.getElementById（“abcd”）.innerHTML=“4”；
如果（id=“五”）
document.getElementById（“abcd”）.innerHTML=“5”；
如果（id=“减”）
document.getElementById（“abcd”）.innerHTML=“-”；
如果（id=“六”）
document.getElementById（“abcd”）.innerHTML=“6”；
如果（id=“七”）
document.getElementById（“abcd”）.innerHTML=“7”；
如果（id=“八”）
document.getElementById（“abcd”）.innerHTML=“8”；
如果（id=“mul”）
document.getElementById（“abcd”）.innerHTML=“*”；
如果（id=“九”）
document.getElementById（“abcd”）.innerHTML=“9”；
如果（id=“清除”）
document.getElementById（“abcd”）.innerHTML=“”；
如果（id=“除法”）
document.getElementById（“abcd”）.innerHTML=“/”；
如果（id=“相等”）
document.getElementById（“abcd”）.innerHTML=“=”；
}
//函数show1（）
// {
//var a=document.getElementById（“zero123”）.value；
//document.getElementById（“abcd”）.innerHTML=“0”；
// }
22+22+33+45=regex= <html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<style>
input
{
height:100px;
width:150px;
border-radius:10px;
border-style:none;
background-color:black;
color:white;
}
.abcde
/*for display purposes*/
{
background-color:blue;
height:100px;
width:608px;
border-radius: 10px;
color:white;
font-size:100px;
}
</style>
<h1>Basic calculator</h1>
</head>
<body>
<div class="abcde" id="abcd">
</div>
<input type="button" value="0" id="zero" onclick="return show(this.id)">
<input type="button" value="1" id="one" onclick="return show(this.id)">
<input type="button" value="2" id="two" onclick="return show(this.id)">
<input type="button" value="+" id="plus" onclick="return show(this.id)"> <br>
<input type="button" value="3" id="three" onclick="return show(this.id)">
<input type="button" value="4" id="four" onclick="return show(this.id)">
<input type="button" value="5" id="five" onclick="return show(this.id)">
<input type="button" value="-" id="minus" onclick="return show(this.id)"> <br>
<input type="button" value="6" id="six" onclick="return show(this.id)">
<input type="button" value="7" id="seven" onclick="return show(this.id)">
<input type="button" value="8" id="eight" onclick="return show(this.id)">
<input type="button" value="*" id="mul" onclick="return show(this.id)"> <br>
<input type="button" value="9" id="nine" onclick="return show(this.id)">
<input type="button" value="C" id="clear" onclick="return show(this.id)">
<input type="button" value="=" id="equal" onclick="return show(this.id)">
<input type="button" value="÷" id="divide" onclick="return show(this.id)">
</body>
<script>
//1. when load add initial "0" in div
document.getElementById("abcd").innerHTML="0";
function show(id)
{
let existingValue = document.getElementById("abcd").innerHTML
if(existingValue ==="0") {
// 2. in case of user enters "0", and "0" already exist then we make div as empty
existingValue = ""
}
/*
3. instead always setting value using following way, can store it in a variable than store it
so it would more readable.
document.getElementById("abcd").innerHTML="2"; // instead we store it like -> nextValue = "2"
document.getElementById("abcd").innerHTML="+"; // instead we store it like -> nextValue = "+"
*/
let nextValue = "";
if(id==="zero")
nextValue="0";
if(id==="one")
nextValue="1";
if(id==="two")
nextValue="2";
if(id==="plus")
nextValue="+";
if(id==="three")
nextValue="3";
if(id==="four")
nextValue="4";
if(id==="five")
nextValue="5";
if(id==="minus")
nextValue="-";
if(id==="six")
nextValue="6";
if(id==="seven")
nextValue="7";
if(id==="eight")
nextValue="8";
if(id==="mul")
nextValue="*";
if(id==="nine")
nextValue="9";
if(id==="clear")
{
existingValue = "";
nextValue="";
}
if(id==="divide")
nextValue="/";
if(id==="equal") { // 4. only perform calculation when user wants it so on "=" perform calculation
/*
// 5
assume input is -> "11-22+33"
then existingValue = 11-22+33
operators will have value like ["", "-", "+", ""]
here, split is function in which i had given regex
[0-9]+ means it will be splited with any between 0 to 9 so we will only get operators like: +, -, * and /
// 6
operators.slice
operators = ["", "-", "+", ""] we got
we no need leading and trailing "" so remove it, then i have only [-, +]
// 7
similar to operators i had splitted using operators to fetch values
values = ["11", "22", "33"]
// 8
in a while i have performed a calculation using following logic:
values = ["11", "22", "33"]
operators = ["-", "+"]
result = values[0] operator[0] values[1]
// -11 = 11 - 22
now, values first two value replace with result value
values = [-11, 33]
and remove the first operator.
operator = [+]
this process we continue till I have only one value in values array, that value will result, that's at
// point: 9
validate function:
this function used to check what value should be allowed after specific char.
reg = ^([0-9]+[+\-\*\/]?
this regex return false in case of user enters multiple operators etc..
wrong input: 99+88+++ // this won't allow and i returned false
*/
let operators = existingValue.split(/[0-9]+/gm); // 5
operators = operators.slice(1, operators.length - 1); // 6. removing leading and trailing space
let values = existingValue.split(/[+\-\*\/]+/gm); // 7.
while (values.length != 1) { // 8
let twoValues = values.slice(0, 2);
values = values.slice(2, values.length); // removing first two value as we are calculating those twoValues
let op = operators[0];
operators = operators.slice(1,operators.length); // removing first operator as we are calculating using that operator
let result = 0;
switch(op) {
case "+":
result = parseInt(twoValues[0]) + parseInt(twoValues[1]);
break;
case "-":
result = parseInt(twoValues[0]) - parseInt(twoValues[1]);
break;
case "*":
result = parseInt(twoValues[0]) * parseInt(twoValues[1]);
break;
case "/":
result = parseInt(parseInt(twoValues[0]) / parseInt(twoValues[1]));
break;
}
values.splice(0,0, result); // adding result value at position 0
}
existingValue = ""
nextValue = values[0];
}
let finalValue = existingValue + nextValue;
let isValidValue = validate(finalValue);
if (isValidValue) { // only append value if its validated
document.getElementById("abcd").innerHTML = existingValue + nextValue;
}
}
// this function which will validate on every button
function validate(finalValue) // 9
{
var regex = /^([0-9]+[+\-\*\/]?)*$/i;
return regex.test(finalValue); //
}
</script>
</html>
计算器
输入
{
高度：100px；
宽度：150px；
边界半径：10px；
边框样式：无；
背景色：黑色；
颜色：白色；
}
.abcde
/*供展示之用*/
{
背景颜色：蓝色；
高度：100px；
宽度：608px；
边界半径：10px；
颜色：白色；
字体大小：100px；
}
基本计算器
//1. 加载时，在div中添加初始值“0”
document.getElementById（“abcd”）.innerHTML=“0”；
功能显示（id）
{
让existingValue=document.getElementById（“abcd”）.innerHTML
如果（现有值==“0”）{
//2.如果用户输入“0”，并且“0”已经存在，那么我们将div设置为空
existingValue=“”
}
/*
3.相反，总是使用以下方法设置值，可以将其存储在变量中，而不是存储
所以它会更具可读性。
document.getElementById（“abcd”）.innerHTML=“2”//而是像->nextValue=“2”一样存储它
document.getElementById（“abcd”）.innerHTML=“+”；//我们将其存储为->nextValue=“+”
*/
设nextValue=“”；
如果（id=“零”）
nextValue=“0”；
如果（id==“一”）
nextValue=“1”；
如果（id==“两个”）
nextValue=“2”；
如果（id==“加”）
nextValue=“+”；
如果（id=“三”）
nextValue=“3”；
如果（id==“四”