Uncaught TypeError: невозможно назначить только для чтения свойство 'tagName' объекта '# <HTMLImageElement>'

Question

Каждый раз, когда я нажимаю на свободное место внутри элемента <li> в моем браузере, я получаю предупреждение в окне с заголовком (gridMainTitle). Это хорошо. Но в этом <li> элементе я установил небольшую сетку, выравнивающую изображение и текст. Моя проблема на данный момент в том, что если я нажимаю на этот объект изображения, который находится внутри сетки, и на элемент li, я также хочу запустить предупреждение. Но я получаю только сообщение об ошибке: Uncaught TypeError: Cannot assign to read only property 'tagName' of object '#<HTMLImageElement>'

this.listRoot = this.mainView.querySelector("ul");
this.listRoot.onclick = (evt) => {
  const selectedLi = this.find(evt.target);
  
  if (selectedLi) {
    alert("clicked on: " + this.getTitleFromLi(selectedLi));
  }
  else {
    alert("something went completely wrong...");
  }
 }
}

find(el) {
  if (el.tagName == "LI") {
    return el;
  }
  else if (el.tagName = "...") { // DIV or IMG doesn't really work.
    return el;
  }
  else if (el.tagName = "UL") {
    return null;
  }
  else if (el.parentNode) {
    return this.find(el.parentNode);
  }
  else { return null; }
}

getTitleFromLi(liElement) {
  return liElement
        .getElementsByClassName("gridMainTitle") [0]
        .textContent;
}

<main class="tiles">
  <ul>
    <li class="grid-container">
      <div class="gridImageObject">
        <img src="imagefile" class="align-left"/>
      </div>
      <div class="gridMainTitle">
        <p class="align-left">Some Text</p>
      </div>
    </li>
  </ul>
</main>

Answer 1

Вы использовали одинарный знак равенства (присвоение), а не двойной знак равенства (сравнение). например,

if (el.tagName = "...")

должно быть

if (el.tagName == "...")