Im creating a calculator using HTML, CSS and javascript
so far, i have created the css layout and the display that holds numbers that have been clicked.
There seems to be an issue with my delete function. i have targeted using dom methods and am trying to attach a addeventlistner with a function that uses the slice method but it doesn’t seem to work
const numberButtons = document.querySelectorAll('[data-number]')
const operatorButtons = document.querySelectorAll('[data-operator]')
const deleteButton = document.querySelectorAll('[data-delete]')
const allClearButton = document.querySelector('[data-allclear]')
const equalsButton = document.querySelector('[data-equals]')
const lastOperation = document.getElementById('operationLast')
const currentOperation = document.getElementById('operationCurrent')
numberButtons.forEach((button) => button.addEventListener('click', () => appendNumber(button.textContent)
))
deleteButton.addEventListener('click', delete1)
allClearButton.addEventListener('click',allclear)
function appendNumber(number){
currentOperation.textContent += number
}
function allclear() {
lastOperation.textContent = ""
currentOperation.textContent = ''
}
function delete1() {
currentOperation.textContent.slice(0,-1)
}*{
background-color: rgb(182, 208, 228);
}
.calculator-grid{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 1000px;
width: 1000px;
}
.output {
align-items: flex-end;
justify-content: end;
justify-content: space-around;
flex-direction: column;
display: flex;
padding: 5px;
min-height: 100px;
min-width: 300px;
background-color: rgb(36, 38, 52);
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.current-operation{
font-size: 35px;
word-break: break-all;
color: white;
background-color: rgb(36, 38, 52);
}
.last-operation{
font-size: 20px;
word-break: break-all;
word-wrap: break-word;
background-color: rgb(36, 38, 52);
color: rgb(206, 206, 206);
}
.button-container {
width: 300px;
height: 360px;
background-color: rgb(53, 57, 88);
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 5px;
}
button {
width: 70px;
height: 70px;
background-color: rgb(53, 57, 88);
color: whitesmoke;
font-size: larger;
}
button:hover {
background-color: rgb(98, 104, 149);
}
button.span-1 {
color: rgb(182, 120, 239);
}
button.span-3 {
background-color: rgb(182, 120, 239);
}
button.span-3:hover {
background-color: rgb(199, 168, 227);
}
button.span-4 {
width: 140px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator-grid">
<div class="output">
<div class="last-operation" id="operationLast"></div>
<div class="current-operation" id="operationCurrent"></div>
</div>
<div class="button-container">
<button data-allclear class="span-1">AC</button>
<button data-delete class="span-1">DEL</button>
<button data-operator class="span-1">%</button>
<button data-operator class="span-3">Ă·</button>
<button data-number>8</button>
<button data-number>4</button>
<button data-number>9</button>
<button data-operator class="span-3">x</button>
<button data-number>1</button>
<button data-number>6</button>
<button data-number>5</button>
<button class="span-3">-</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-number>7</button>
<button data-operator class="span-3">+</button>
<button data-number class="span-4">0</button>
<button data-operator>.</button>
<button data-equals class="span-3">=</button>
</div>
</div>
<script src="app.js"> </script>
</body>
</html>
>Solution :
If you assign the slice to the content again should work:
currentOperation.textContent = currentOperation.textContent.slice(0,-1);
and if you have only one deleteButton use querySelector instead of querySelectorAll
otherwise you need to loop between all the deleteButtons and add the event on each one.