javascript - Loop through divs and add onmouseover

Question

Really struggling with this one, although I know the solution should be simple.

1. I have set of divs
2. Each div includes an icon
3. Which on mouseover, I want a popup to appear.
4. And mouse off, disappear.

I've injected my divs into my HTML, via DOM manipulation, which I think is part of the issue. (But I have to do it this way, due to the application I'm using. This cannot change).

I've then set my mouseover function, via setAtttribute. setAttribute("onmouseover", "triggerPopUp(event)"); `

But I keep getting the error:

Uncaught TypeError: Cannot read property 'classList' of null

I'm not sure how to get this to work....

On hover, I'm trying to get the ID of the popup and remove a class to make it appear: document.getElementById(event.target.id).classList.remove("refund-popup");

Any tips would be helpful!!

Here's a code example:

let getFirstCardOption  = document.querySelectorAll(".getFirstCardOption");

triggerPopUp = (event) => {
    // let popup = document.querySelector(".callout__content.top.right.refund-popup");
    // popup.classList.remove("refund-popup")
    console.log("event", event.target.id);
    event.target.classList.remove("refund-popup");
};

closePopUp = (event) => {
    // let popup = document.querySelector(".callout__content.top.right");
    // popup.classList.add("refund-popup");
    console.log("event", event.target.id);
    event.target.classList.add("refund-popup");
};

for (let i = 0; i < getFirstCardOption.length; i++) {

  console.log(i);
  let priceParent = document.querySelectorAll(".price")[i];
  let pricePillsContainer = document.querySelectorAll(".price__pills")[i];

  let depositMessageContainer = document.createElement("div");
  depositMessageContainer.classList.add("price__desposit-message");
  priceParent.insertBefore(depositMessageContainer, pricePillsContainer);

  // Container One
  let depositIconDivOne = document.createElement("div");
  depositIconDivOne.classList.add("deposit-icon");
  depositMessageContainer.appendChild(depositIconDivOne);

  let depositCopyOne = document.createElement("p");
  depositCopyOne.classList.add("deposit-copy");
  depositCopyOne.innerHTML = "Hover over the black icon/square below";
  depositIconDivOne.appendChild(depositCopyOne);

  // ADD POPUP CONTAINER
  let calloutContainer = document.createElement("div");
  calloutContainer.classList.add("callout__container", "refund");
  calloutContainer.setAttribute("onmouseover", "triggerPopUp(event)");
  calloutContainer.setAttribute("onmouseout", "closePopUp(event)");
  calloutContainer.setAttribute("id", `refund-${[i]}`);
  depositIconDivOne.appendChild(calloutContainer);

  let calloutParent = document.createElement("div");
  calloutParent.classList.add("callout__parent");
  calloutContainer.appendChild(calloutParent);

  let calloutIcon = document.createElement("i");
  calloutIcon.classList.add("more-info");
  calloutParent.appendChild(calloutIcon);

  let calloutSVG = document.createElement("svg");
  calloutSVG.setAttribute("aria-hidden", "true");
  calloutSVG.setAttribute("height", "16px");
  calloutSVG.setAttribute("width", "16px");
  calloutSVG.setAttribute("focusable", "false");
  calloutSVG.setAttribute("data-prefix", "fas");
  calloutSVG.setAttribute("data-icon", "info-circle");
  calloutSVG.setAttribute("class", "svg-inline--fa fa-info-circle fa-w-16");
  calloutSVG.setAttribute("role", "img");
  calloutSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  calloutSVG.setAttribute("viewBox", "0 0 512 512");
  calloutIcon.appendChild(calloutSVG);

  let calloutPath = document.createElement("path");
  calloutPath.setAttribute("fill", "currentColor");
  calloutPath.setAttribute("d", "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z");
  calloutSVG.appendChild(calloutPath);

  // Add POPUP DIV AND MESSAGE
  let calloutContent = document.createElement("div");
  calloutContent.classList.add("callout__content", "top", "right", "refund-popup");
  calloutContent.setAttribute("id", `refund-${[i]}`);
  calloutContent.innerText = "Pop is appearing!"
  calloutContainer.appendChild(calloutContent);
};

.price {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-end;
    margin-bottom: 10px;
    border: 1px solid red;
}

.price__desposit-message {
    background-color: #F0FFED;
    color: #55A446;
    padding: 10px;
}

.deposit-icon:nth-child(1) {
    margin-bottom: 10px;
}

deposit-icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    border: 1px
}

.callout__container .callout__parent {
    display: inline-block;
    line-height: 45px;
    cursor: pointer;
    border: 1px solid black;
    width: 20px;
    height: 20px;
}

callout__container {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-height: 45px;
}

.refund-popup {
    display: none;
}

<div class="getFirstCardOption">
  <div class="price">
    <div class="price__pills"></div>
  </div>
</div>

<div class="getFirstCardOption">
  <div class="price">
    <div class="price__pills"></div>
  </div>
</div>

Answer 1

I think you shoud do event.target.classList.remove("refund-popup"); instead of document.getElementById(event.target.id).classList.remove("refund-popup"); because you already have the element in the event there is no need to select it again.