Untitled

 avatar
unknown
plain_text
a year ago
4.0 kB
2
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