如何减少 Javascript 重复

Question

我一直在 CS50 IDE 中开发在线计算器。到目前为止一切都很好，尽管我对有多少重复感到困扰。我的代码如下：

document.querySelector("#one").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 1;
  } else {
    expression.innerHTML += 1;
  }
}
document.querySelector("#two").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 2;
  } else {
    expression.innerHTML += 2;
  }
}
document.querySelector("#three").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 3;
  } else {
    expression.innerHTML += 3;
  }
}
document.querySelector("#four").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 4;
  } else {
    expression.innerHTML += 4;
  }
}
document.querySelector("#five").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 5;
  } else {
    expression.innerHTML += 5;
  }
}
document.querySelector("#six").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 6;
  } else {
    expression.innerHTML += 6;
  }
}
document.querySelector("#seven").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 7;
  } else {
    expression.innerHTML += 7;
  }
}
document.querySelector("#eight").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 8;
  } else {
    expression.innerHTML += 8;
  }
}
document.querySelector("#nine").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 9;
  } else {
    expression.innerHTML += 9;
  }
}
document.querySelector("#zero").onclick = function() {
  let expression = document.querySelector("#expression");
  if (Number(expression.innerHTML) == 0) {
    expression.innerHTML = 0;
  } else {
    expression.innerHTML += 0;
  }
}

table {
  border: 3px solid black;
  border-collapse: collapse;
}

.center {
  margin: 0 auto;
  position: absolute;
  left: 39.5%;
  top: 6.25%;
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -40%);
}

<div style="text-align: center;" id="expression">0</div>
<div style="text-align: center; border: 3px solid blue; height: 30px; width: 300px; margin: 0 auto;">
  <div class="center">
    <button id="one">1</button>
    <button id="two">2</button>
    <button id="three">3</button>
    <button id="four">4</button>
    <button id="five">5</button>
    <button id="six">6</button>
    <button id="seven">7</button>
    <button id="eight">8</button>
    <button id="nine">9</button>
    <button id="zero">0</button>
  </div>
</div>

如您所见，正文的脚本部分基本上是一大堆复制粘贴。我有什么办法可以简化这段代码，这样我就不必在保持相同功能的同时重复 Javascript 代码了吗？

Answer 1

您应该只创建一个将数字作为参数的函数：

<button id="one" onClick="add(1)">1</button>
<script>
    function add(num) {
        // etc
    }
</script>

Answer 2

不是按 ID 单独 select 按钮，而是按按钮元素 select 或在所有按钮上使用通用 class。然后将侦听器应用于所有这些。

const buttons = document.querySelectorAll("#buttons button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    let expression = document.querySelector("#expression");
    if (Number(expression.innerHTML) == 0) {
      expression.innerHTML = buttons[i].textContent;
    } else {
      expression.innerHTML += buttons[i].textContent;
    }
  });
}

<div style="text-align: center;" id="expression">0</div>
<div class="center" id="buttons">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
</div>

Answer 3

您可以将点击侦听器添加到父级并根据该显示表达式侦听其子级点击

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Calculator</title>
        <style>
           
         
        </style>
    </head>
    <body>
        <div style="text-align: center;" id="expression">0</div>
        <div style="text-align: center; border: 3px solid blue; height: 30px; width: 300px; margin: 0 auto;">
            <div class="center">
                <button id="one">1</button>
                <button id="two">2</button>
                <button id="three">3</button>
                <button id="four">4</button>
                <button id="five">5</button>
                <button id="six">6</button>
                <button id="seven">7</button>
                <button id="eight">8</button>
                <button id="nine">9</button>
                <button id="zero">0</button>
            </div>
        </div>
        <script>
            document.querySelector(".center").onclick = function(event) {
                  let expression = document.querySelector("#expression");
                if(event.target.tagName === 'BUTTON') {
                  const text = event.target.textContent;
                  if(expression.textContent == 0) {
                     expression.innerHTML = text;
                  } else {
                     expression.innerHTML += text;
                  }
                }
      
            }
        </script>
    </body>
</html>

如何减少 Javascript 重复

How to reduce Javascript repetition

html

javascript

button

repeat

cs50