How can I retrieve the matching array element from another array?

Question

How can I retrieve the matching array element from another array?

Apologies for the vague title, I'm struggling to convey my issue clearly. I've tried looking through similar posts but couldn't find a solution that fits my needs.

Here's what I'm attempting to achieve:

I want to create an array containing elements from the DOM like this:

var boxes = ["box1", "box2", "box3"]

Additionally, I need an array of popups with display:none

var popups = ["pop1", "pop2", "pop3"]

The goal is to click on boxes[i] and have it open popups[i].

My question is how do I capture the [i] event so I can correctly link it to open the corresponding popup?

Although I haven't included code here, you can refer to this template as guidance:

var boxes = document.getElementsByClassName("box");
var popupss = document.getElementsByClassName("pop");

.wrapper {
  display: flex;
  justify-content:space-between;
}

.box {
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display:flex;
  justify-content:center;
  background-color: rgba(0,0,0,0.4);
  position:fixed;
  height:100%;
  width:100%;
  z-index:2;
  overflow:auto;
}

.pop {
  margin-top:6em;
  background-color:white;
  height: 50px;
  width: 80%;
  display:none;
  justify-content:center;
  align-items:center;
}

.hide {
  display:none;
}

.show {
  display:flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop1">
  Pop1!
  </div>
  
  <div class="pop" id="pop2">
  Pop2!
  </div>
  
  <div class="pop" id="pop3">
  Pop3!
  </div>
</div>

Thank you!

javascript arrays var

Answer 1

Answer №1

Here is a solution with detailed comments. Click on the boxes below to see the pop-ups.

Javascript functions used:

//select all divs with class box and iterate them
Array.prototype.forEach.call(document.querySelectorAll("div.box"), function(element, index) {
  //we use Array.prototype.map and use call to pass the node list into the map function to iterate

  //assign click handlers
  //when an element is clicked it will fire the function boxHandler. We use bind to pass the index of the element to the function.
  element.addEventListener("click", boxHandler.bind(element, index), true);

  //hide all pops
  document.querySelectorAll("div.pop")[index].classList.add("hide");
});

function boxHandler(index) {
  //select the div based upon the index. 
  var pop = document.querySelectorAll("div.pop")[index];
  if (pop.getAttribute("data-clicked") != 1) {
    //add show to class using classlist.add
    pop.classList.add("show");
    pop.classList.remove("hide");
    pop.setAttribute("data-clicked", 1);
  } else {
    pop.classList.remove("show");
    pop.classList.add("hide");
    pop.setAttribute("data-clicked", 0);
  }

}

.wrapper {
  display: flex;
  justify-content: space-between;
}

.box {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 2;
  overflow: auto;
}

.pop {
  margin-top: 6em;
  background-color: white;
  height: 50px;
  width: 80%;
  display: none;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

.show {
  display: flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop1">
    Pop1!
  </div>

  <div class="pop" id="pop2">
    Pop2!
  </div>

  <div class="pop" id="pop3">
    Pop3!
  </div>
</div>

Answer 2

Here is a solution with detailed comments. Click on the boxes below to see the pop-ups.

Javascript functions used:

//select all divs with class box and iterate them
Array.prototype.forEach.call(document.querySelectorAll("div.box"), function(element, index) {
  //we use Array.prototype.map and use call to pass the node list into the map function to iterate

  //assign click handlers
  //when an element is clicked it will fire the function boxHandler. We use bind to pass the index of the element to the function.
  element.addEventListener("click", boxHandler.bind(element, index), true);

  //hide all pops
  document.querySelectorAll("div.pop")[index].classList.add("hide");
});

function boxHandler(index) {
  //select the div based upon the index. 
  var pop = document.querySelectorAll("div.pop")[index];
  if (pop.getAttribute("data-clicked") != 1) {
    //add show to class using classlist.add
    pop.classList.add("show");
    pop.classList.remove("hide");
    pop.setAttribute("data-clicked", 1);
  } else {
    pop.classList.remove("show");
    pop.classList.add("hide");
    pop.setAttribute("data-clicked", 0);
  }

}

.wrapper {
  display: flex;
  justify-content: space-between;
}

.box {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 2;
  overflow: auto;
}

.pop {
  margin-top: 6em;
  background-color: white;
  height: 50px;
  width: 80%;
  display: none;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

.show {
  display: flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop1">
    Pop1!
  </div>

  <div class="pop" id="pop2">
    Pop2!
  </div>

  <div class="pop" id="pop3">
    Pop3!
  </div>
</div>

Answer 3

Answer №2

Your coding strategy could use some improvement. Instead of duplicating code, try to pause and reconsider your approach. Rather than creating separate HTML pop sections, it's more efficient to have a single HTML placeholder for the pop message and store the possible values in a JavaScript array. This not only simplifies the HTML structure but also eliminates the need for a .hide CSS class.

Simply assign each box a click event function that dynamically sets the corresponding pop message from the array into the pop placeholder.

// Store possible pop messages:
var popMessages = ["Pop1!", "Pop2!", "Pop3!"];

// Reference the pop placeholder
var pop = document.getElementById("pop");

// Use .querySelectorAll() instead of .getElementsByClassName for better performance
var boxes = Array.prototype.slice.call(document.querySelectorAll(".box"));

// Loop through the boxes
boxes.forEach(function(box, index){
  // Set click event handling function for each box
  box.addEventListener("click", function(){
    // Assign the pop message based on the index of the clicked box
    pop.textContent = popMessages[index];
  });
});

.wrapper {
  display: flex;
  justify-content:space-between;
}

.box {
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display:flex;
  justify-content:center;
  background-color: rgba(0,0,0,0.4);
  position:fixed;
  height:100%;
  width:100%;
  z-index:2;
  overflow:auto;
}

.show {
  display:flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop"></div>
</div>

Answer 4

Your coding strategy could use some improvement. Instead of duplicating code, try to pause and reconsider your approach. Rather than creating separate HTML pop sections, it's more efficient to have a single HTML placeholder for the pop message and store the possible values in a JavaScript array. This not only simplifies the HTML structure but also eliminates the need for a .hide CSS class.

Simply assign each box a click event function that dynamically sets the corresponding pop message from the array into the pop placeholder.

// Store possible pop messages:
var popMessages = ["Pop1!", "Pop2!", "Pop3!"];

// Reference the pop placeholder
var pop = document.getElementById("pop");

// Use .querySelectorAll() instead of .getElementsByClassName for better performance
var boxes = Array.prototype.slice.call(document.querySelectorAll(".box"));

// Loop through the boxes
boxes.forEach(function(box, index){
  // Set click event handling function for each box
  box.addEventListener("click", function(){
    // Assign the pop message based on the index of the clicked box
    pop.textContent = popMessages[index];
  });
});

.wrapper {
  display: flex;
  justify-content:space-between;
}

.box {
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display:flex;
  justify-content:center;
  background-color: rgba(0,0,0,0.4);
  position:fixed;
  height:100%;
  width:100%;
  z-index:2;
  overflow:auto;
}

.show {
  display:flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop"></div>
</div>

How can I retrieve the matching array element from another array?

Answer №1

Answer №2

Similar questions

What is the best way to create a reusable component for Cards and implement the new makeStyles feature in material-ui?

Which javascript array libraries, utilities, or extensions are considered the top choices?

Mesh object circling in the opposite direction of the displayed image

Can individual items be removed one by one from a newly created int[] array?

Using Vue3 and Vuex4: How to efficiently render only a subset of items from an array with v-for

Sending JSON data using Ajax with circular reference

Tips for automatically updating a table on 'wix' when adding data to a dataset through a submit button

React Native App experiences immediate crashes when launched on TestFlight

I attempted to create a callable function for creating a user, but I encountered an error when running it and I am unable to determine the cause

Tips on bringing data from a php file into a javascript variable

Guide on implementing datatables.js in a Vue.js2 project

Suggestion: optimal placement for HTML table data - JavaScript or HTML?

Is there a way to send both a JSON object and a zipped folder in one request from a single endpoint in Spring Boot?

Is there a method to asynchronously set items in local storage using JavaScript?

typescript set x and y values to specific coordinates

Looking for assistance grasping the concept of using a for loop in MongoDB's aggregate method

Display: Show view once forEach loop finishes execution

Developing a Cloud Function for Stripe that is taking forever to finalize writing data to Firestore

Unable to alphabetically arrange buttons automatically

What are the reasons for issues arising in the findConsecutiveOnes Java code when the input size grows significantly?