Этот проект должен быть наиболее распространенным проектом, который каждый пытается сделать. Я уже сделал это, следуя учебнику по Udemy. Но теперь я хочу сделать калькулятор, используя свою собственную логику и собственные стратегии решения проблем.

Проблема: в настоящее время у меня есть 2 проблемы в моем приложении калькулятора. 1) Пользователи могут ввести только 1 цифру для расчета. Я хочу, чтобы это работало для 10-значных чисел. 2) Чтобы кнопки работали. Я сделаю все возможное, чтобы вы поняли эту проблему, поскольку она немного отличается. Например, пользователь вводит цифру 12, затем нажимает , затем нажимает 16

ожидаемый результат:

Происходит сложение 12 16 и 28 на выходе.

Существующая проблема: во-первых, пользователь не может даже ввести 12. он может вводить только 1 цифру за раз. и далее, когда он нажимает сложение, нет функций, которые выполняют вычисления, потому что я думаю о том, как определить пользовательский ввод до и после нажатия каких-либо операторов, а затем сохранить его в некоторых переменных и выполнить операции согласно операторам.

мой настоящий код:

{amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;title{amp}gt;Calculator{amp}lt;/title{amp}gt; {amp}lt;style{amp}gt; 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; } {amp}lt;/style{amp}gt; {amp}lt;h1{amp}gt;Basic calculator{amp}lt;/h1{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;script{amp}gt; // function clearfunc() // { // document.getElementById("abcd").innerHTML="0"; // } function show(id) { if(id=="zero") document.getElementById("abcd").innerHTML="0"; if(id=="one") document.getElementById("abcd").innerHTML="1"; if(id=="two") document.getElementById("abcd").innerHTML="2"; if(id=="plus") document.getElementById("abcd").innerHTML=" "; if(id=="three") document.getElementById("abcd").innerHTML="3"; if(id=="four") document.getElementById("abcd").innerHTML="4"; if(id=="five") document.getElementById("abcd").innerHTML="5"; if(id=="minus") document.getElementById("abcd").innerHTML="-"; if(id=="six") document.getElementById("abcd").innerHTML="6"; if(id=="seven") document.getElementById("abcd").innerHTML="7"; if(id=="eight") document.getElementById("abcd").innerHTML="8"; if(id=="mul") document.getElementById("abcd").innerHTML="*"; if(id=="nine") document.getElementById("abcd").innerHTML="9"; if(id=="clear") document.getElementById("abcd").innerHTML=""; if(id=="divide") document.getElementById("abcd").innerHTML="/"; if(id=="equal") document.getElementById("abcd").innerHTML="="; } // function show1() // { // var a=document.getElementById("zero123").value; // document.getElementById("abcd").innerHTML="0"; // } {amp}lt;/script{amp}gt; {amp}lt;div class="abcde" id="abcd"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" value="0" id="zero" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="1" id="one" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="2" id="two" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value=" " id="plus" onclick="return show(this.id)"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="button" value="3" id="three" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="4" id="four" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="5" id="five" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="-" id="minus" onclick="return show(this.id)"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="button" value="6" id="six" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="7" id="seven" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="8" id="eight" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="*" id="mul" onclick="return show(this.id)"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="button" value="9" id="nine" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="C" id="clear" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="=" id="equal" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="{amp}amp;#247;" id="divide" onclick="return show(this.id)"{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

1) Пользователи могут ввести только 1 цифру для расчета. Я хочу, чтобы это работало для 10-значных чисел.

Вы должны написать логику, которая добавляет существующее значение, которое не сделано в вашем коде, в вашем коде оно всегда будет заменено новым значением.

2) Чтобы кнопки работали. Я сделаю все возможное, чтобы вы поняли эту проблему, поскольку она немного отличается. Например, пользователь вводит цифру 12, затем нажимает , затем нажимает 16

это не единственная проблема, которая может быть возможна, пользователь вводит 22 22 33 45 и затем нажимает = для расчета

для каждого значения и оператора вы не можете иметь переменную, поэтому я использовал здесь regex которое не позволит пользователю ввести недопустимое выражение, и мы будем выполнять вычисления, только если пользователь введет кнопку =

 {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;title{amp}gt;Calculator{amp}lt;/title{amp}gt; {amp}lt;style{amp}gt; 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; } {amp}lt;/style{amp}gt; {amp}lt;h1{amp}gt;Basic calculator{amp}lt;/h1{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="abcde" id="abcd"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" value="0" id="zero" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="1" id="one" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="2" id="two" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value=" " id="plus" onclick="return show(this.id)"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="button" value="3" id="three" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="4" id="four" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="5" id="five" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="-" id="minus" onclick="return show(this.id)"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="button" value="6" id="six" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="7" id="seven" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="8" id="eight" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="*" id="mul" onclick="return show(this.id)"{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="button" value="9" id="nine" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="C" id="clear" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="=" id="equal" onclick="return show(this.id)"{amp}gt; {amp}lt;input type="button" value="{amp}amp;#247;" id="divide" onclick="return show(this.id)"{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;script{amp}gt; // function clearfunc() // { // document.getElementById("abcd").innerHTML="0"; // } document.getElementById("abcd").innerHTML="0"; function show(id) { let existingValue = document.getElementById("abcd").innerHTML if(existingValue ==="0") { existingValue = "" } 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") { let operators = existingValue.split(/[0-9] /gm); operators = operators.slice(1, operators.length - 1); // removing leading and trailing space let values = existingValue.split(/[ -*/] /gm); while (values.length != 1) { 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) { var regex = /^([0-9] [ -*/]?)*$/i; return regex.test(finalValue); } {amp}lt;/script{amp}gt; {amp}lt;/html{amp}gt;