Changing DIV visibility using javascript and a different image than was initially visible. Not using buttons
Question
I've tried to keep this relatively simple and I've spent the past 6 hours trying to get this work so if someone could correct me that'd be amazing.
Desired Behaviour: Clicking image 1 should make it hide, image 2 is already there, clicking image 2 should make image 1 visible again. The user should be able to switch between each image multiple times.
I have managed to make it so that the first image is no longer visible when it is clicked and it shows a second image (which I'm using instead of a button) when the second image is clicked it should display the first image again, I've tried resetting the div but I'm not sure on what the best means would be to make it visible again.
<!--Notice--> <div class="notice1"> <style>.notice1 { position:fixed; bottom:0%; left:0%; z-index: 2;}</style> <img class="notice1" img draggable="false" onclick="this.style.display='none';" src="URL FOR IMAGE 1" width="100%" alt=""></div> <div class="Notice2"> <style>.notice2 { position:fixed; bottom:0%; right: 0%; z-index: 1;}</style> <img class="notice2" img draggable="false" src="URL FOR IMAGE 2" width="2.5%" alt=""></div>
<script> function changeVisibility() { document.getElementById("notice1").style.visibility = "hidden"; } function resetElement() { document.getElementById("notice2").style.visibility = "visible";> </script>
The first snippet works and the first image disappears, I just need it to show the first image again when the second one is clicked.
I'd tried to do this without scripts but I have no idea how. The first image disappears but I do not understand why clicking the first image won't make it disappear again. If you paste in your own image links you'll be able to see what I mean.
If someone could copy my code and make the changes directly that'd be amazing. I think there's something I'm missing and I can't find anything on this website that actually uses the same method as I.
Thanks.
3 answers
solution1
3 ACCPTED 2017-12-20 20:53:15
You have a number of problems with your code:
- You've attempted to create a new tag to reset the element:
alt="ALT TAG"> <onclick="resetElement()">
You're probably looking for an inline event handler attribute (which would still be bad practice ). Ideally you should use.onclickinstead. - Your images have an
imgattribute, which doesn't exist. - You have inline
<style>tags in the<body>.<style>must come inside<head>. You can validate your markup with the W3C Markup Validation Service . - You're targeting your elements with
document.getElementById(), when your elements have no ID. They have classes, so you're probably looking fordocument.getElementsByClassName(). Note that this returns aNodeListcollection of elements, so you need to access the first result with[0]. - You have a capital
Nin your declaration ofNotice2, which should benotice2. - Your
resetElement()function is never called. Instead, you set thedisplayfornotice1inline (when you should be modifying thevisibility). -
notice1is not invisible by default. - You apply the notice classes to both the images and their respective parents, which is very likely unintentional.
- Your two images have different
widthattributes, which is also very likely to be unintentional. - You have no toggle functionality. You want to swap the
visibilityrules when clicking on the second image.
Fixing all of that up gives you a working example, as can be seen in the following:
var notice1 = document.getElementsByClassName("notice1")[0]; var notice2 = document.getElementsByClassName("notice2")[0]; notice1.onclick = function() { notice1.style.visibility = "hidden"; notice2.style.visibility = "visible"; } notice2.onclick = function() { notice2.style.visibility = "hidden"; notice1.style.visibility = "visible"; }
.notice1 { position: fixed; bottom: 0%; left: 0%; z-index: 2; } .notice2 { position: fixed; bottom: 0%; right: 0%; z-index: 1; visibility: hidden; }
<!--Notice--> <div> <img class="notice1" draggable="false" src="http://placekitten.com/101" width="100%" alt="ALT TAG"> <img class="notice2" draggable="false" src="http://placekitten.com/102" width="100%" alt="ALT TAG"> </div>
Hope this helps! :)
solution2
1 2017-12-20 21:10:00
I might look at something like this. First, remove the listeners from inline. then, Remove the hard-coded styles from the script (while you can do it, it will be easier to simply maintain a class than to toggle individual styles). Adding the listeners by script is going to be easier to debug and edit. And have the listener's callback do whatever toggling you might need. Try this one!
var notice1 = document.getElementsByClassName("notice1")[0]; var notice2 = document.getElementsByClassName("notice2")[0]; notice1.addEventListener("click", function(){ notice1.classList.add("hidden"); notice2.classList.remove("hidden"); }) notice2.addEventListener("click", function(){ notice2.classList.add("hidden"); notice1.classList.remove("hidden"); });
.notice1 { position: fixed; bottom: 0%; left: 0%; z-index: 2; } .notice2 { position: fixed; bottom: 0%; right: 0%; z-index: 1; } .hidden { display: none; }
<!--Notice--> <div> <img class="notice1" draggable="false" src="http://placekitten.com/101" width="100%" alt="ALT TAG"> <img class="notice2" draggable="false" src="http://placekitten.com/102" width="100%" alt="ALT TAG"> </div>
solution3
0 2017-12-20 21:34:53
First I highly recommmend reading Decoupling Your HTML, CSS, and JavaScript .
If I were to write this, it would be reusable and not limited to only 2 (of anything, could be div's, forms, whatever who cares).
$(document).ready(() => { var cssIsHidden = 'is-hidden'; $(".js-rotate").each((i,e) => { var $parent = $(e); $parent.find('.is-rotating') .addClass(cssIsHidden) .on('click', (e) => { var $rotate = $(e.currentTarget); $rotate.addClass(cssIsHidden); var next = $rotate.data('rotate-next'); var $next = $parent.find(next); $next.removeClass(cssIsHidden); }); var initial = $parent.data('rotate-first'); $(initial).removeClass(cssIsHidden); }); });
.is-hidden{ display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="js-rotate" data-rotate-first=".ro-1"> <img class="ro-1 is-rotating" draggable="false" src="http://placekitten.com/101" data-rotate-next=".ro-2"> <img class="ro-2 is-rotating" draggable="false" src="http://placekitten.com/102" data-rotate-next=".ro-1"> </div>
Now you could pretty much add as many images (or any other element you want) in any number of locations:
// Same exact code as above | no changes $(document).ready(() => { var cssIsHidden = 'is-hidden'; $(".js-rotate").each((i,e) => { var $parent = $(e); $parent.find('.is-rotating') .addClass(cssIsHidden) .on('click', (e) => { var $rotate = $(e.currentTarget); $rotate.addClass(cssIsHidden); var next = $rotate.data('rotate-next'); var $next = $parent.find(next); $next.removeClass(cssIsHidden); }); var initial = $parent.data('rotate-first'); $(initial).removeClass(cssIsHidden); }); });
.is-hidden{ display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Multiple Images: <div class="js-rotate" data-rotate-first=".ro-1"> <img class="ro-1 is-rotating" draggable="false" src="http://placekitten.com/101" data-rotate-next=".ro-2"> <img class="ro-2 is-rotating" draggable="false" src="http://placekitten.com/102" data-rotate-next=".ro-3"> <img class="ro-3 is-rotating" draggable="false" src="http://placekitten.com/103" data-rotate-next=".ro-4"> <img class="ro-4 is-rotating" draggable="false" src="http://placekitten.com/104" data-rotate-next=".ro-1"> </div> Just two, but independant of the first set: <div class="js-rotate" data-rotate-first=".ro-1"> <img class="ro-1 is-rotating" draggable="false" src="http://placekitten.com/101" data-rotate-next=".ro-2"> <img class="ro-2 is-rotating" draggable="false" src="http://placekitten.com/102" data-rotate-next=".ro-1"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.