Calling document.querySelectorAll(...) retrieves all matching elements across the entire document, resulting in the display of all info boxes after clicking the "View" button.
function showInfos(e){
/* Open view buttons */
let showdetails = document.querySelectorAll('.showdetails');
showdetails.forEach((showdetail,index) =>{
showdetail.style.display = 'block'
});
}
To simplify the code:
function showInfos(e) {
const showdetails = e.target.querySelector('.showdetails');
showdetails.style.display = 'block';
}
This code references the clicked element (the button) and executes the query on that specific element.
Example with full functionality
const getAgent = async() =>{
let url = 'https://valorant-api.com/v1/agents'
let res = await fetch(url);
let data = await res.json()
createAgentBox(data);
}
const createAgentBox = (element) =>{
const agentContainer = document.querySelector('.agent-container');
let agents = element.data;
agents.forEach(agent =>{
let agentName = agent.displayName;
let agentImage = agent.fullPortrait;
let desc = agent.description;
let abilitiesImage1 = agent.abilities[0].displayIcon;
let abilitiesImage2 = agent.abilities[1].displayIcon;
let abilitiesImage3 = agent.abilities[2].displayIcon;
let abilitiesImage4 = agent.abilities[3].displayIcon;
let abilitiesName1 = agent.abilities[0].displayName;
let abilitiesName2 = agent.abilities[1].displayName;
let abilitiesName3 = agent.abilities[2].displayName;
let abilitiesName4 = agent.abilities[3].displayName;
let x = `<div class="agentbox">
<img src=${agentImage} alt="">
<h1 class='agentname'>${agentName}</h1>
<button class="seeDetails" >View
<div class="showdetails" >
<i class="fa-solid fa-xmark"></i>
<p>${desc}</p>
<div class='boxs'>
<div class="box1">
<img src=${abilitiesImage1} alt="">
<p>${abilitiesName1}</p>
</div>
<div class="box2">
<img src=${abilitiesImage2} alt="">
<p>${abilitiesName2}</p>
</div>
<div class="box3">
<img src=${abilitiesImage3} alt="">
<p>${abilitiesName3}</p>
</div>
<div class="box4">
<img src=${abilitiesImage4} alt="">
<p>${abilitiesName4}</p>
</div>
</div>
</div>
</div>
</button>
</div>`
agentContainer.innerHTML += x;
});
let seeDetails = document.querySelectorAll('.seeDetails')
seeDetails.forEach(seeDetail =>{
seeDetail.addEventListener('click', showInfos)
})
function showInfos(e) {
const showdetails = e.target.querySelector('.showdetails');
showdetails.style.display = 'block';
}
}
getAgent()
let searcInput = document.querySelector('.searchbox');
searcInput.addEventListener('input',function(){
const agentsName = document.querySelectorAll('.agentname')
let container = document.querySelector('.container')
const search = searcInput.value;
agentsName.forEach((agentName) =>{
agentName.parentElement.style.display = 'block';
container.style.height = '100%'
if(!agentName.innerHTML.toLowerCase().includes(search)){
agentName.parentElement.style.display = 'none';
container.style.height = "100vh"
}
})
})
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
... (CSS styles)