How can I nested my code that aim to add "onClick" function in vanilla js

Question

this is my vanilla js code for manipulate the DOM. On top part it work perfectly fine. But i want to learn how to shrink down this code

 // this code is small part of "Calculator website" project.

 const numInput = (num) => {

    // .. another condition ..

    monitorNum.innerText = (monitorNum.innerText * 10) + num;
 };


    // i want to shrink down the code at below.

 document.getElementById("one").addEventListener("click", () => {
    numInput(1);
  })
  document.getElementById("two").addEventListener("click", () => {
    numInput(2);
  })
  document.getElementById("three").addEventListener("click", () => {
    numInput(3);
  })
  document.getElementById("four").addEventListener("click", () => {
    numInput(4);
  })
  document.getElementById("five").addEventListener("click", () => {
    numInput(5);
  })
  document.getElementById("six").addEventListener("click", () => {
    numInput(6);
  })
  document.getElementById("seven").addEventListener("click", () => {
    numInput(7);
  })
  document.getElementById("eight").addEventListener("click", () => {
    numInput(8);
  })
  document.getElementById("nine").addEventListener("click", () => {
    numInput(9);
  })
  document.getElementById("o").addEventListener("click", () => {
    numInput(0);
  })

at first I try some forEach. But look like I'm not understand js enough.

// I try to make obj and get it forEach with object.entries. But it's not how it work.

const numberObj = {
    "one": 1,
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
    "six": 6,
    "seven": 7,
    "eight": 8,
    "nine": 9,
    "o": 0
  }

  object.entries(numberObj).forEach(([key, value]) => {
    document.getElementById(key).addEventListener("click", () => {
      numInput(value);
    })
  })

Can you give me some suggestion or any knowledge about this situation. Thank you in advance.

I try to use object and forEach method for add even listener to manipulate DOM object. but each object not respond with my "object.entries & forEach" code at all.

Answer 1

You're almost there. This is a way to do it:

const numberObj = {
    "one": 1,
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
    "six": 6,
    "seven": 7,
    "eight": 8,
    "nine": 9,
    "zero": 0
  }
  
  var monitorNum = 0;

  numInput = (num) => {
      monitorNum = (monitorNum * 10) + parseInt(num);
      document.getElementById('monitor').innerHTML = monitorNum;
  };

  Object.entries(numberObj).forEach(([key, value]) => {
    document.getElementById(key).addEventListener("click", () => {
      numInput(value);
    })
  })

<div id="monitor">-</div>

<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>