文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试为计算器创建删除按钮函数

问尝试为计算器创建删除按钮函数
EN

Stack Overflow用户

提问于 2022-07-28 11:32:37

回答 1查看 167关注 0票数 0

到目前为止，我使用HTML、CSS和javascript创建了一个计算器，我已经创建了css布局和显示，它保存了已单击的数字。

我的删除功能似乎有问题。我的目标是使用dom方法，并试图使用使用片方法的函数附加addeventlistner，但它似乎不起作用。

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>

dom

addeventlistener

javascript

function

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-28 11:39:57

如果您再次将切片分配给内容，则应该可以：

currentOperation.textContent = currentOperation.textContent.slice(0,-1);

如果您只有一个deleteButton，那么使用querySelector而不是querySelectorAll

否则，您需要在所有deleteButtons之间循环，并在每个事件上添加事件。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73152182

复制

相似问题

问尝试为计算器创建删除按钮函数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试为计算器创建删除按钮函数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试为计算器创建删除按钮函数
EN