Untitled
unknown
plain_text
2 years ago
4.0 kB
5
Indexable
// ---節點---
const displayValue = document.querySelector(".display-value"); //顯示的地方
const number = document.querySelectorAll(".number"); //00, 0-9
const percent = document.querySelector(".percent"); //%
const deleteOne = document.querySelector(".deleteOne"); // <--
const clearAll = document.querySelector(".clearAll"); //C
// const equal = document.querySelector(".equal"); //=
const dot = document.querySelector(".dot"); //.
const operation = document.querySelectorAll(
".add, .minus, .multiply, .divide, .equal"
); // +
let firstInput = true; //是否已經輸入第一個數字
let perviousValue = ""; // 儲存上一個值
let currentValue = null; // 儲存新值
let currentOperation = null; // 儲存運算符號
//---監聽---
//監聽數字按鈕---number和operation要forEach---
operation.forEach((button) => {
button.addEventListener("click", function () {
currentOperation = button.textContent;
firstInput = true;
console.log(currentOperation);
calculate(currentOperation);
});
});
number.forEach((button) => {
button.addEventListener("click", function () {
let clickedNumber = displayValue.textContent;
// 檢查當前操作是否為空
if (currentOperation === null) {
// 如果是空,將顯示的值賦給previousValue
perviousValue = clickedNumber;
console.log("First number: " + perviousValue);
} else {
// 如果不是空,將顯示的值賦給currentValue
currentValue = clickedNumber;
console.log("Second number: " + currentValue);
}
showValue();
calculate();
});
});
percent.addEventListener("click", clickedPercent); //監聽 %
deleteOne.addEventListener("click", deleteOneNumber); //監聽 <--
clearAll.addEventListener("click", clearAllNumber); //監聽 C
dot.addEventListener("click", showValue); //監聽 .
// equal.addEventListener("click", function () {
// calculate();
// }); //監聽 =
//---function---
//按C清除所有數字,並顯示0 (OK)
function clearAllNumber() {
const clickedClearAll = (displayValue.textContent = 0);
firstInput = true;
}
//按<-- 刪除最後一個輸入的數字 (OK)
function deleteOneNumber() {
let currentNumber = displayValue.textContent;
currentNumber = currentNumber.slice(0, -1);
displayValue.textContent = currentNumber;
if (currentNumber === "") {
displayValue.textContent = "0";
firstInput = true;
} //如果刪到空了,顯示0,並回到firstInput = true狀態
}
//按% 將該數/100後顯示
function clickedPercent() {
let currentNumber = displayValue.textContent;
currentNumber = currentNumber / 100;
displayValue.textContent = currentNumber;
}
//執行秀在display框框裡
//只能顯示數字
function showValue() {
let clickedNumber = event.target.textContent; //取得按鈕上的值
if (firstInput === true) {
displayValue.textContent = "";
firstInput = false; //清空之後就是false,表示已經輸入第一個值
}
displayValue.textContent += clickedNumber;
}
//運算
//如果0是第一個數字,後面接數字就消失不顯示,後面接 . 或是+-*/ 要顯示0
//只要displayValue被清空 就要顯示0,只要點擊任一數字,0就會改為點擊的數字,要怎麼寫
//只要按下%=,再按下任一數字按鍵就重新開始計算,除非按+-*/
//先進行計算,不要跑去displayValue裡面
function calculate() {
let result;
switch (currentOperation) {
case "+":
result = perviousValue + currentValue;
break;
case "-":
result = perviousValue - currentValue;
break;
case "×":
result = perviousValue * currentValue;
break;
case "÷":
result = perviousValue / currentValue;
break;
default:
result = perviousValue;
}
return result;
displayValue.textContent = result;
console.log("result" + result);
}
Editor is loading...
Leave a Comment