I'm working on a website which have multiply images. The user can click on this images and then it will show a tiny text under this one. My idea was to get the ID of the images and then show the text who correspond to this one.
Let me show you my code
function SOE() {
let bSOE = document.getElementById("bSOE");
let Soe = document.getElementById("SOE");
if (getComputedStyle(Soe).display != "none") {
Soe.style.display = "none";
} else {
var elements = document.getElementsByClassName("secret");
for (var i = 0; i < elements.length; i++) {
if (elements[i].id != "SOE") {
elements[i].style.display = "none";
}
}
Soe.style.display = "block";
}
}<div class="mn_bo3">
<div class="map" id="bSOE" onclick="SOE()" style="background-image: url('source/Soe.png')"></div>
<div class="map" id="bTG" style="background-image: url('source/tg.png')"></div>
<div class="map" id="bDER" style="background-image: url('source/Der.png')"></div>
<div class="map" id="bZNS" style="background-image: url('source/Zns.png')"></div>
<div class="map" id="bGK" style="background-image: url('source/Gk.png')"></div>
</div>
<!--Tiny hidden text -->
<div class="secret" id="SOE" style="display:none;">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>So I created a function but it's working only for one and it's not using this ID. I need some help or this code will be very DRY.
Thanks a lot for read that!
You could pass the id of each div in the onClick function call, like this:
JS:
function SOE(id){
let bSOE = document.getElementById(id);
...
}
HTML:
<div class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('source/Soe.png')" ></div>
Or if its guaranteed, that every object has an ID you could get the id via the 'this' object (js stays the same):
<div class="map" id="bSOE" onclick="SOE(this.id)" style="background-image: url('source/Soe.png')" ></div>
After that you can create a object, which saves the image id with the text id:
var elements = { "BSOE": "SOE" }
And then display the corresponding text for each image:
function SOE (id) {
var elem = document.getElementById(elements[id]);
elem.style.display = "block";
Check up on this code to see if it solve your issue.
function SOE(selector) {
$('p').fadeOut(500)
$('#'+selector+' > p').fadeIn(500)
}.mn_bo3 {
height: 100vh;
display: flex;
justify-content: space-between;
}
.map {
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
p {
position: absolute;
bottom: -2em;
left: 0;
right: 0;
text-align: center;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mn_bo3">
<div class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('1.png')">
<p>Text image 1</p>
</div>
<div class="map" id="bTG" onclick="SOE('bTG')" style="background-image: url('2.png')">
<p>Text image 2</p>
</div>
<div class="map" id="bDER" onclick="SOE('bDER')" style="background-image: url('3.png')">
<p>Text image 3</p>
</div>
<div class="map" id="bZNS" onclick="SOE('bZNS')" style="background-image: url('4.png')">
<p>Text image 4</p>
</div>
<div class="map" id="bGK" onclick="SOE('bGK')" style="background-image: url('1.png')">
<p>Text image 5</p>
</div>
</div>You can create a common click handler for all images and show hidden text with receptive image.
So in this case your code structure will be as below
<div class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)"></div>
<div class="secret" id="bSOE_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
Working Code
function onElementClick(event){
//Before showing div hide other's one
[...document.querySelectorAll('div.secret')].forEach(el => el.style.display = 'none');
//To show the repective div
document.querySelector('div#' + event.id + '_text').style.display = 'block';
}.map {
height: 100px;
width: 100px;
background-size: cover;
order: 1px solid;
margin: 10px;
}
.secret {
display: none;
}<div class="mn_bo3">
<div class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)" ></div>
<div class="secret" id="bSOE_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bTG" style="background-image: url(https://picsum.photos/200
)" onclick="onElementClick(this)"></div>
<div class="secret" id="bTG_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bDER" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div class="secret" id="bDER_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bZNS" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div class="secret" id="bZNS_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bGK" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div class="secret" id="bGK_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
</div>