我不知道为什么当我在事件侦听器中调用函数时更改函数内的操作变量时，它不会全局更改-解网

问：

我是 JavaScript 的新手，我想构建一个计算器，但是当我尝试更改事件侦听器中的全局变量时，变量仅在本地更改，但是当我需要链接到相等按钮的事件侦听器中的变量时，它会采用运算符的初始值，该值为空，因此我无法选择操作器并进行计算operatoroperator

let current_number = "";
let operator = "";
let previous = "";
let disp = document.querySelector("#current");
let prev = document.querySelector("#previous");
let equal = document.querySelector("#equal");

equal.addEventListener("click", calculate);

let number = document.querySelectorAll(".digit");
let oper = document.querySelectorAll(".operation");
number.forEach((element) => {
  element.addEventListener("click", function(e) {
    handleNumber(e.target.textContent);
    disp.textContent = current_number;
  });
});

oper.forEach((element) => {
  element.addEventListener("click", (e) => {
    handleOperator(e.target.textContent);
    prev.textContent = previous + " " + operator;
    disp.textContent = current_number;
  });
});

function handleNumber(num) {
  if (current_number.length < 10) {
    current_number += num;
  }
}

function handleOperator(op) {
  operator = op;
  previous = current_number;
  current_number = "";
}

function calculate() {
  previous = Number(previous);
  current_number = Number(current_number);
  if (operator === "+") {
    previous += current_number;
  } else if (operator === "-") {
    previous -= current_number;
  } else if (operator === "*") {
    previous *= current_number;
  } else {
    previous /= current_number;
  }
  console.log(previous);
}

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #2a92c7, #00ffc6);
}
#container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
.btn {
  border: 1px solid white;
  border-radius: 0;
}
#main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100px;
}
#current {
  font-size: 2rem;
}
#display {
  background-color: rgba(13, 42, 6, 0.7);
}
.btn:hover {
  background-color: #9ea0a2;
}
.digit {
  font: 900;
}

<!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>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container-fluid">
      <div
        class="row text-light align-items-center justify-content-center"
        style="min-height: 100vh"
      >
        <div id="display" class="col-sm-5 col-xl-4">
          <div class="row">
            <div id="main" class="col-12 bg-gradient">
              <div id="previous" class="col"></div>
              <div id="current" class="col"></div>
            </div>
            <button class="col-6 btn btn-secondary shadow-none">AC</button>
            <button class="col-3 btn btn-secondary shadow-none">Del</button>
            <button class="operation col-3 btn btn-secondary shadow-none">
              /
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">1</button>
            <button class="digit col-3 btn btn-secondary shadow-none">2</button>
            <button class="digit col-3 btn btn-secondary shadow-none">3</button>
            <button class="col-3 btn btn-secondary shadow-none operation">
              *
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">4</button>
            <button class="digit col-3 btn btn-secondary shadow-none">5</button>
            <button class="digit col-3 btn btn-secondary shadow-none">6</button>
            <button class="col-3 btn btn-secondary shadow-none operation">
              -
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">7</button>
            <button class="digit col-3 btn btn-secondary shadow-none">8</button>
            <button class="digit col-3 btn btn-secondary shadow-none">9</button>
            <button class="col-3 btn btn-secondary shadow-none operation">
              +
            </button>
            <button
              id="dicim"
              class="digit col-3 btn btn-secondary shadow-none"
            >
              .
            </button>
            <button class="digit col-3 btn btn-secondary shadow-none">0</button>
            <button id="equal" class="col-6 btn btn-secondary shadow-none">
              =
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript 范围闭包计算器

我不知道为什么当我在事件侦听器中调用函数时更改函数内的操作变量时，它不会全局更改

i dont know why when i change my operation variable inside the function when called into the event listener it doesnt change globally

评论

评论