I have created some additional software for my project, which includes a large div with smaller divs inside. Here is an example of how it is structured:
<div class="scroll-area" id="lista">
<div class="box" id="item1">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info</p></a>
<p class="info"><a href="#">Take</p></a>
</div>
<div class="box" id="item2">
<p>Item #2</p>
<p class="info"><a href="#">Info</p></a>
<p class="info"><a href="#">Reservar</p></a>
</div>
<div class="box" id="item3">
<p>Item #3</p>
<p class="info"><a href="#">Info</p></a>
<p class="info"><a href="#">Take</p></a>
</div>
<div class="box" id="item4">
<p>Lab #4</p>
<p class="info"><a href="#">Info</p></a>
<p class="info"><a href="#">Take</p></a>
</div>
<div class="box" id="item5">
<p>Item #5</p>
<p class="info"><a href="#">Info</p></a>
<p class="info"><a href="#">Take</p></a>
</div>
<div class="box" id="item6">
<p>Item #6</p>
<p class="info"><a href="#">Info</p></a>
<p class="info"><a href="#">Take</p></a>
</div>
</div>
Using pop-up for items:
<div class="popUp hide" id="popUp">
<div class="stylePopUp">
<span>Info</span>
<span value="Close" id="btnClose">x</span>
</div>
<ul>
<li>Name: Item #1</li> !-- This is where I want to replace the information -->
<li>BLA</li>
<li>BLA</li>
<li>BLA</li>
</ul>
</div>
CSS Styles:
.box {
display: inline-block;
padding: 2px;
width: 75px;
border: 2px solid black;
margin: 3px;
}
.box:hover{
border:2px solid #e67e22;
}
Javascript Functions:
var elementInfo = document.getElementById('lnkInfo'),
elementBtnClose = document.getElementById('btnClose');
elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrect');
});
elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrect');
});
function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}
function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}
Currently, when I click on "Info," a pop-up displays with information like:
Name: Item X
Instead of creating a div for each item, I would like to dynamically generate this information using JavaScript based on the clicked div. I am unsure about the correct syntax and approach in JavaScript for achieving this task.
I was thinking of implementing a loop that compares the IDs of each div and assigns a value to "Name:" X accordingly. However, my limited experience in programming makes me uncertain. Any guidance or assistance on how to proceed would be highly appreciated.
Thank you for your help! Best Regards!