I am trying to work on writing a div swap with images using javascript. I have created two divs. One which is display block, and the second div which is display none. When the user clicks on the image, an onclick is supposed to hide the showing div and show the hidden div in it's place.
When the user clicks the same image location, the image shifts based on the xy value and the divs are supposed to swap out again. I cannot seem to get this to function correctly. I can get the click to swap out the divs when I don't set the display on either divs, but that leaves both divs showing stacked. I am almost there but cannot find what I am missing to only show one div at once. Is there a better way that I could be doing this? Please help?
<div class="row" style="margin-top: 15px;">
<div style="border:1px dashed #CCC;background:#fff;padding:10px 0px;">
<div style="text-align:center;">
<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea">
<p style="background: url('images/LH_Trial.png') 0 0;background-repeat: no-repeat; height: 75px;"> </p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2">
<p style="background: url('images/LH_Trial.png') 0 -75px;background-repeat: no-repeat; height: 75px;"> </p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>
</div>
</div>
</div>
Here is my javascript:
<script>
ele = document.getElementById("trialarea");
function lhtrial(){
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
The following code should work for you, although you are really better off attaching your events using addEventListener() instead of inline in the HTML. You also identified the id lhtext twice in your HTML, which is not allowed.
function lhtrial() {
ele = document.getElementById("trialarea");
ele2 = document.getElementById("trialarea2");
if (ele.style.display === "none") {
ele.style.display = "block";
ele2.style.display = "none";
} else {
ele.style.display = "none";
ele2.style.display = "block";
}
}#lhimage1 {
background: url('http://lorempixel.com/400/200/sports/1/') 0 0;
background-repeat: no-repeat;
height: 75px;
}
#lhimage2 {
background: url('http://lorempixel.com/400/200/sports/2/') 0 0;
background-repeat: no-repeat;
height: 75px;
}
#trialarea2 {
display: none;
}<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea">
<p id="lhimage1"> </p>
<p><span id="lhtext1"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2">
<p id="lhimage2"> </p>
<p><span id="lhtext2"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments