Я пытаюсь добавить в свой калькулятор функциональность, которая ограничивает количество цифр, которое вы можете ввести на экране за один раз.(В данном случае 8, чтобы калькулятор не расширялся и не выглядел уродливо).Я делаю это, используя операторы if, чтобы проверить, имеет ли переменная, представляющая цифры на экране, длину больше или равна 8, а затем пытаюсь очистить экран, если это так.В данный момент калькулятор очищается после попытки ввода двух цифр на экране.Что-то говорит мне, что есть некоторый конфликт целых чисел / строк, мешающий мне выполнить эту задачу.Какие еще есть решения?
Спасибо
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Calculator</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="flex-container">
<div class="calculator">
<div id="screen">
<div id="displayedVal">0</div>
</div>
<div id="button-set">
<div>
<button class="numberCalc" id="seven">7</button>
<button class="numberCalc" id="eight">8</button>
<button class="numberCalc" id="nine">9</button>
<button class="operatorCalc" id="divide">÷</button>
</div>
<div>
<button class="numberCalc" id="four">4</button>
<button class="numberCalc" id="five">5</button>
<button class="numberCalc" id="six">6</button>
<button class="operatorCalc" id="multiply">×</button>
</div>
<div>
<button class="numberCalc" id="one">1</button>
<button class="numberCalc" id="two">2</button>
<button class="numberCalc" id="three">3</button>
<button class="operatorCalc" id="minus">-</button>
</div>
<div>
<button class="numberCalc" id="zero">0</button>
<button class="operatorCalc" id="point">.</button>
<button class="operatorCalc" id="plus">+</button>
<button class="operatorCalc" id="equals">=</button>
</div>
</div>
</div>
</div>
<style>
.flex-container {
display: flex;
height: 610px;
justify-content: center;
align-items: center;
}
.calculator {
background-color: #28283e;
padding: 30px;
border-radius: 20px;
box-shadow: 2px 0 2px 1px;
height: 350px;
}
#screen {
background-color: #ffffff;
height: 70px;
border-radius: 5px;
margin-top: -12px;
}
#displayedVal {
font-size: 45px;
text-align: right;
margin-right: 5px;
}
#button-set {
margin-top: 16px;
margin-bottom: -20px;
}
button {
margin: 10px 5px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
<script>
// grabbing the digit on the screen
var displayedNum = document.getElementById("displayedVal");
// grabbing the calculator buttons
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var divide = document.getElementById("divide");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var multiply = document.getElementById("multiply");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var minus = document.getElementById("minus");
var zero = document.getElementById("zero");
var point = document.getElementById("point");
var plus = document.getElementById("plus");
var equals = document.getElementById("equals");
var defaultVal = "0";
var pendingVal;
evalStringArray = [];
// separating the number buttons from the operator buttons
var numberCalc = document.getElementsByClassName("numberCalc");
var operatorCalc = document.getElementsByClassName("operatorCalc");
// when a number button is clicked, the screen will display the number corresponding to that button
var updateDisplayValue = (clickObj) => {
var valOutput = clickObj.target.innerText;
if (defaultVal === "0")
defaultVal = "";
// currentVal = "" + whichever number is pressed (string format)
currentVal = defaultVal + valOutput;
// what displays on the screen
displayedVal.innerText = currentVal;
var numOfDigits = displayedVal.innerText.length();
if (numOfDigits.length >= "8")
clearDigits();
}
function clearDigits() {
displayedVal.innerText.clear();
}
var activateOperator = (clickObj) => {
operatorOutput = clickObj.target.innerText;
switch(operatorOutput) {
case divide:
displayedVal.innerText = valOutput / valOutput
break;
case multiply:
displayedVal.innerText = valOutput * valOutput
break;
case minus:
displayedVal.innerText = valOutput - valOutput
break;
case point:
break;
case plus:
displayedVal.innerText = valOutput + valOutput
break;
case equals:
break;
default:
}
}
// iterating through each number
for (let i = 0; i < numberCalc.length; i++) {
numberCalc[i].addEventListener("click", updateDisplayValue);
}
// iterating through each operator
for (let i = 0; i < operatorCalc.length; i++) {
operatorCalc[i].addEventListener("click", activateOperator);
}
</script>
</body>
</html>