嘗試為計算器創建刪除按鈕 function

Question

到目前為止，我使用 HTML、CSS 和 javascript 創建了一個計算器，我已經創建了包含已點擊布局的 ZC7A628CBA22E28EB17B5F5C6 數字的 ZC7A628CBA22E28EB17B5F5C6。

我的刪除 function 似乎有問題。 我的目標是使用 dom 方法，並嘗試將 addeventlistner 與使用 slice 方法的 function 連接，但它似乎不起作用

 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>

Answer 1

如果您再次將切片分配給內容應該可以工作：

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

如果你只有一個 deleteButton 使用querySelector而不是querySelectorAll

否則，您需要在所有 deleteButtons 之間循環並在每個按鈕上添加事件。

嘗試為計算器創建刪除按鈕 function

問題描述

1 個解決方案

解決方案1
1 已采納 2022-07-28 11:39:57

嘗試為計算器創建刪除按鈕 function

問題描述

1 個解決方案

解決方案1 1 已采納 2022-07-28 11:39:57

解決方案1
1 已采納 2022-07-28 11:39:57