How to reduce Javascript repetition

I have been working on an online calculator in the CS50 IDE. Everything is working fine so far, although I am bothered by how much repetition there is. My code is below:

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>

As you can see, the script section of the body is basically a giant mess of copy-pasting. Is there any way for me to simplify this code so I wouldn’t have to repeat Javascript code while keeping the same functionality?

Answer

Instead of selecting the buttons individually by ID, select by the button element or using a common class on all buttons. Then apply the listener to all of them.

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>
Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .