CODEWITHSUNDEEP
javascripthtmltypeerror
user4698000
user4698000

Reputation:

Uncaught TypeError: Cannot assign to read only property 'tagName' of object '#<HTMLImageElement>'

Whenever I am clicking on a free space inside an <li> element in my browser I am getting an window alert showing up the Title (gridMainTitle). This is okay. But on this <li> Element I have set up a small grid layout aligning an image and some text. My problem for now is if I am clicking on that image object which is inside the grid and on the li element, I also want to fire an alert. But I am only getting an Error saying: 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>

Upvotes: 0

Views: 554

Answers (1)

AUSteve
AUSteve

Reputation: 3248

You've used a single equal sign (assignment) rather than double-equal sign (comparison). eg 

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

should be

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

Upvotes: 1

Related Questions