Can't get modal to display unique information from divs of a single class-CodePudding

I'm a bit of a beginner and trying to create a modal that is triggered by mouseenter/mouseleave event handlers tied to a single class that is attached to multiple div blocks, but uses javascript to grab unique title and paragraph info from attributes on each div when the mouse is over it. Is this possible or do I have to create individual modals for each div to achieve this? (I tentatively set it up to display the info from the first box on all of them to show generally what i'm going for)

https://codepen.io/admaloch/pen/yLKWWew

boxes.forEach((box) => {
  box.addEventListener("mouseenter", function (e) {
    modalContainer.classList.remove("display-none");
    modalTitle.innerText = titleInfo[0].title;
    modalParagraph.innerText = dataContent[0].dataset.content;
  });

  box.addEventListener("mouseleave", function (e) {
    modalContainer.classList.add("display-none");
  });
});

CodePudding user response：

I'm not sure if I understood correctly, but you can just access these attributes through box

const boxes = document.querySelectorAll(".block");

const modalContainer = document.querySelector(".modal");
const modalTitle = document.querySelector(".modal-title");
const modalParagraph = document.querySelector(".modal-paragraph");

boxes.forEach((box) => {
  box.addEventListener("mouseenter", function (e) {
    modalContainer.classList.remove("display-none");
    modalTitle.innerText = box.title;
    modalParagraph.innerText = box.dataset.content;
  });

  box.addEventListener("mouseleave", function (e) {
    modalContainer.classList.add("display-none");
  });
});

.block-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.block {
  background-color: blue;
  height: 50px;
  width: 50px;
  margin-top: 50px;
}

.display-none {
  display: none;
}

.modal {
  position: fixed;
  background-color: lightblue;
  width: 30%;
  height: 100px;
  left: 35%;
  top: 10vh;
  border-radius: 14px;
}

.modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.modal-title,
.modal-paragraph {
  margin: 0;
  padding: 0;
}

<div >
  <div >
    <div  title="1" data-content="Info for the 1st box"></div>
    <div  title="2" data-content="Info for the 2nd box"></div>
    <div  title="3" data-content="Info for the 3rd box"></div>
    <div  title="4" data-content="Info for the 4th box"></div>
    <div  title="5" data-content="Info for the 5th box"></div>
    <div  title="6" data-content="Info for the 6th box"></div>
  </div>

  <div >
    <div >
      <h3 ></h3>
      <p ></p>
    </div>
  </div>
</div>

CodePudding user response：

You can pass an index in forEach and use that index instead of titleInfo[0]

boxes.forEach((box, index) => {
  box.addEventListener("mouseenter", function (e) {
    modalContainer.classList.remove("display-none");
    modalTitle.innerText = titleInfo[index].title;
    modalParagraph.innerText = dataContent[index].dataset.content;
  });

  box.addEventListener("mouseleave", function (e) {
    modalContainer.classList.add("display-none");
  });
});