How does a promise executes console.log but doesnt execute a change on element (e,g innerHtml )

Question

I am trying to add a click eventlistener to more than a button as you can see here i introduced buttons as objects that saves the name, functionality and button elemnt (yep html element)

let btn = function (num, functionality, button) {
  this.num = num;
  this.functionality = functionality;
  this.button = button;
  this.body =
    functionality == "operator"
      ? `<button class="btn operator btn-danger" id="btn${this.num}">` +
        this.num +
        `</button>`
      : `<button class="btn number btn-danger" id="btn${this.num}">` +
        this.num +
        `</button>`;
  this.get = function (propName) {
    return this[propName];
  };
  this.set = function (propName, value) {
    this[propName] = value;
  };
};

then i initialized an array of buttons and added the buttons:

let btnArray = [
  new btn("1", "number", null),
  new btn("2", "number", null),
  new btn("3", "number", null),
  new btn("4", "number", null),
  new btn("5", "number", null),
  new btn("6", "number", null),
  new btn("7", "number", null),
  new btn("8", "number", null),
  new btn("9", "number", null),
  new btn("0", "number", null),
  new btn("C", "operator", null),
  new btn("+", "operator", null),
  new btn("-", "operator", null),
  new btn("=", "getResult", null),
  new btn(".", "fraction", null),
  new btn("X", "operator", null),
];

function addBtns() {
  for (let item of btnArray) {
    item.set("button", document.getElementById("btn" + item.get("num")));
  }
}

function renderResult(data) {
  resultBar.innerHTML += data;
}
function renderCalculator() {
  let gridColStart = 4;
  let gridColEnd = 5;
  let gridRowStart = 2;
  let gridRowEnd = 3;
  for (let item of btnArray) {
    container.innerHTML += item.get("body");
  }
  const opBtns = document.querySelectorAll(".operator");

  opBtns.forEach((item) => {
    item.style.gridColumnStart = `${gridColStart}`;
    item.style.gridColumnEnd = `${gridColEnd}`;
    item.style.gridRowStart = `${gridRowStart}`;
    item.style.gridRowEnd = `${gridRowEnd}`;
    if (gridRowStart < 5) {
      gridRowStart++;
      gridRowEnd++;
    }
  });
  addBtns();
  ***for (let item of btnArray) {
    item.get("button").addEventListener("click", function () {
      resultBar.innerHTML += "eee";
    });
  }***
}

renderCalculator();

so basically if you take a look at the innerHTML line if i replace it with console.log it will work, otherwise it wont. why is that? how can i fix such a problem? in future how can i know what exactly i did wrong?

replacing the line with console.log can work.. otherwise it wont