Trying to create a delete button function for a calculator-CodePudding

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 > 
        <div >
            <div  id="operationLast"></div>
            <div  id="operationCurrent"></div>
        </div>

        <div >
            <button data-allclear >AC</button>
            <button data-delete >DEL</button>
            <button data-operator >%</button>
            <button data-operator >÷</button>
            <button data-number>8</button>
            <button data-number>4</button>
            <button data-number>9</button>
            <button data-operator >x</button>
            <button data-number>1</button>
            <button data-number>6</button>
            <button data-number>5</button>
            <button >-</button>
            <button data-number>2</button>
            <button data-number>3</button>
            <button data-number>7</button>
            <button data-operator > </button>
            <button data-number >0</button>
            <button data-operator>.</button>
            <button data-equals >=</button>
        </div>
     
    </div>
    <script src="app.js"> </script>
</body>
</html>

CodePudding user response：

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.