Calculations are working properly and everything seems great but when I click delete, "DE"(DEL without one letter) displays on the screen next to the numbers and I can’t figure out why, it may be due to textContent from html that says DEL but I’m not sure
<h1>Calculator</h1>
<div id="calculator">
<div class="screen">
<p class="screen_num">0000</p>
</div>
<div class="buttons">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">/</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">*</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">-</button>
<button class="number">0</button>
<button class="decimal">.</button>
<button class="calculate">=</button>
<button class="operator">+</button>
<button class="clear">C</button>
<button class="delete">DEL</button>
</div><! - - DELETE BUTTON-->
</div>
//Function elements
let ScreenNum = document.querySelector('.screen_num');
let Num = document.querySelectorAll('.number');
let Operator = document.querySelectorAll('.operator');
let Calculation = document.querySelector('.calculate');
let Clear = document.querySelectorAll('.clear');
let Buttonn = document.querySelectorAll('.buttons button');
let Decimal = document.querySelector('.decimal');
let deleteButton = document.querySelector('.delete');
//Add number on screen
let CurrentNum = '';
let MaxLenght = 7;
Buttonn.forEach(function(button){
button.addEventListener('click', function(){
/*-----Max lenght-----*/
if (CurrentNum.length >= MaxLenght) {
return;
}
/*-----No 0 at start-----*/
if (CurrentNum === '' && button.textContent === '0') {
return;
}
/*-----No multiple decimal points-----*/
if (button.classList.contains('decimal') && CurrentNum.includes('.')) {
return;
}
/*-----Click decimal at start ==> 0 with decimal-----*/
if (CurrentNum === '' && button.classList.contains('decimal')) {
CurrentNum = '0.';
ScreenNum.textContent = CurrentNum;
} else {
CurrentNum += button.textContent;
ScreenNum.textContent = CurrentNum;
}
});
});
//Math
let firstNum = '';
let operator = '';
let secondNum = '';
let result = 0;
Operator.forEach(function(operatorButton){
operatorButton.addEventListener('click', function(){
firstNum = CurrentNum;
operator = operatorButton.textContent;
secondNumb = '';
CurrentNum = '';
});
});
Calculation.addEventListener('click', function(){
secondNum = CurrentNum;
let num1 = parseFloat(firstNum);
let num2 = parseFloat(secondNum);
if (operator === '+') {
result = num1 + num2;
} else if (operator === '-') {
result = num1 - num2;
} else if (operator === '*') {
result = num1 * num2;
} else if (operator === '/') {
result = num1 / num2;
}
CurrentNum = result.toString();
ScreenNum.textContent = CurrentNum;
});
//Clear
Clear.forEach(function(clearButton) {
clearButton.addEventListener('click', function() {
firstNum = '';
operator = '';
secondNum = '';
result = 0;
CurrentNum = '';
ScreenNum.textContent = '0000';
});
});
//Delete
deleteButton.addEventListener('click', function() {
if (CurrentNum !== ''){
CurrentNum = CurrentNum.slice(0, CurrentNum.length -1);
ScreenNum.textContent = CurrentNum;
}
});
I tried to delete MaxLength and it worked, then I went back and tried to replace -1 with -4 in CurrentNum.slice and it deleting 1 digit until the number of digits is 7 or more so I guess the problem is in MaxLength
3
Answers
It should be due to HTML. Be careful upadating textContent
the DEL button is adding text to ScreenNum cause event handler is assigned for all buttons in:
I suggest two adjustments:
I tried here and these two changes made DEL button and the calculator in general work as intended.
have a nice day.
During checking your buttons you forget to check the delete button so I have modified you code little bit on the last else statement :
your previous code :
New modified code that checks if its delete button :
Now the Delete button works fine .