CODEWITHSUNDEEP
javascriptfunctiondomaddeventlistener
Master1
Master1

Reputation: 47

Trying to create a delete button function for a calculator

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>

Upvotes: 0

Views: 3742

Answers (1)

mgm793
mgm793

Reputation: 2066

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.

Upvotes: 1

Related Questions