I am working on a project with Javascript, HTML, CSS and Google maps. In this project I have two lists with images and text as follows:
<ul>
<li>
<img>
</li>
...
</ul>
Currently when I click on each image of both lists, I check some condition and add them to an array. Through another function I show them in a new box. I do it like this:
document.querySelectorAll("img").forEach(function(image) {
var imagen;
image.addEventListener("click", function(e) {
if (!reportList.includes(this)) {
reportList.push(this);
if (reportList.length < 2) {
addMarkerButton.disabled = true;
} else {
addMarkerButton.disabled = false;
}
} else {
alert("Element is already in the report");
}*/
});
});
The problem that I can not solve is that when I click on the images in the UNO list, a new list should be opened for each image with more images that I should add to the array and from the array to the box.
What I tried was to create the new lists and from the previous function add the images to the array depending on the id of the image that I click (I do several if) but it does not work. Any suggestions?
FULL HTML:
<body>
<div id="container">
<input
type="image"
id="report-img"
class="report-img"
src="pictures/64/sea.png"
onclick="openReportBox()"
/>
<div id="report-box" class="report-box" style="display: none">
<ul id="variableTable" style="display: block">
<li>
<img
id="dirtywater"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua sucia</p>
</li>
<li>
<img id="group" class="listImage" src="pictures/64/group.png" />
<p class="listText">Gente</p>
</li>
<li>
<img
id="jellyfish"
class="listImage"
src="pictures/64/jellyfish.png"
/>
<p class="listText">Agua-vivas</p>
</li>
<li>
<img id="waves" class="listImage" src="pictures/64/waves.png" />
<p class="listText">Olas</p>
</li>
<li>
<img id="wind" class="listImage" src="pictures/64/windy.png" />
<p class="listText">Viento</p>
</li>
</ul>
<ul id="dirtywaterTable" style="display: none">
<li>
<img
id="dirtwater1"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua poco sucia</p>
</li>
<li>
<img
id="dirtwater2"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua sucia</p>
</li>
<li>
<img
id="dirtwater3"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua muy sucia</p>
</li>
</ul>
<ul id="groupTable" style="display: none">
<li>
<img id="group1" class="listImage" src="pictures/64/group.png" />
<p class="listText">Poca gente</p>
</li>
<li>
<img id="group2" class="listImage" src="pictures/64/group.png" />
<p class="listText">Gente</p>
</li>
<li>
<img id="group3" class="listImage" src="pictures/64/group.png" />
<p class="listText">Mucha gente</p>
</li>
</ul>
<ul id="jellyfishTable" style="display: none">
<li>
<img
id="jellyfish1"
class="listImage"
src="pictures/64/jellyfish.png"
/>
<p class="listText">Pocas agua-vivas</p>
</li>
<li>
<img
id="jellyfish2"
class="listImage"
src="pictures/64/jellyfish.png"
/>
<p class="listText">Agua-vivasa</p>
</li>
<li>
<img
id="jellyfish3"
class="listImage"
src="pictures/64/jellyfish.png"
/>
<p class="listText">Muchas agua-vivas</p>
</li>
</ul>
<ul id="wavesTable" style="display: none">
<li>
<img id="waves1" class="listImage" src="pictures/64/waves.png" />
<p class="listText">Olas pequeñas</p>
</li>
<li>
<img id="waves2" class="listImage" src="pictures/64/waves.png" />
<p class="listText">Olas grandes</p>
</li>
<li>
<img id="waves3" class="listImage" src="pictures/64/waves.png" />
<p class="listText">Olas enormes</p>
</li>
</ul>
<ul id="windTable" style="display: none">
<li>
<img id="wind1" class="listImage" src="pictures/64/windy.png" />
<p class="listText">Poco viento</p>
</li>
<li>
<img id="wind2" class="listImage" src="pictures/64/windy.png" />
<p class="listText">Viento</p>
</li>
<li>
<img id="wind3" class="listImage" src="pictures/64/windy.png" />
<p class="listText">Mucho viento</p>
</li>
</ul>
<!--
<ul id="fixedTable" style="display: block">
<li>
<img id="jet" class="listImage" src="pictures/64/jet.png" />
<p class="listText">Alquiler de motos</p>
</li>
<li>
<img
id="sunumbrella"
class="listImage"
src="pictures/64/sunumbrella.png"
/>
<p class="listText">Alquiler de sombrillas</p>
</li>
<li>
<img id="toilets" class="listImage" src="pictures/64/toilets.png" />
<p class="listText">Baños</p>
</li>
<li>
<img id="volley" class="listImage" src="pictures/64/volley.png" />
<p class="listText">Cancha de volley</p>
</li>
<li>
<img id="parador" class="listImage" src="pictures/64/cutlery.png" />
<p class="listText">Parador</p>
</li>
</ul>
-->
<!--
<ul id="dirtywaterTable" style="display: block">
<li>
<img
id="parador"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua poco sucia</p>
</li>
<li>
<img
id="parador"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua sucia</p>
</li>
<li>
<img
id="parador"
class="listImage"
src="pictures/64/dirtywater.png"
/>
<p class="listText">Agua muy sucia</p>
</li>
</ul>
-->
<button id="add-marker" class="add-marker">Add marker</button>
</div>
</div>
<div id="map"></div>
<script src="js/app.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOEhho_jnKsgon1s6APsc4_oREVihhnLo&callback=initMap"
async
defer
></script>
</body>
Thanks in advance, I'm very close.