rannatr Posted July 28, 2016 Share Posted July 28, 2016 (edited) Hello! I'm pretty new into coding and I have following problem: I have modal gallery which has Close X button on topright and also I have script for browsing back and forward with arrow keys. Also ESC button works for closing my modal window+clicking outside modal. It looks like this: <div id="myModal" class="modal"> <span class="close">×</span> <script>// Get the modalvar modal = document.getElementById('myModal');// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";} However now I want to add Prev and Next buttons with span and I want to onclick = clickHandler; So if i click on my prev or next span It will go to handler (just as it works for browsing with keyboard arrow keys) So I made CSS and put back and forward spans in place: <div id="myModal" class="modal"> <span class="close">×</span> <span class="next">❱</span> <span class="prev">❰</span> <img class="modal-content" id="img01"> <div id="caption"></div></div><script>// Get the modalvar modal = document.getElementById('myModal');// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";} How I can make clicking on prev or next spans work for browsing my slides (as it works with arrow keys on keyboard). Currenlty only my close button works. Thanks, Edited July 28, 2016 by rannatr Link to comment Share on other sites More sharing options...
davej Posted July 28, 2016 Share Posted July 28, 2016 Assign a handler to a parent element and then use an if statement to check the event target. http://www.w3schools.com/jsref/event_target.asp ele.onclick = function(evt) { alert(evt.target.id); } Link to comment Share on other sites More sharing options...
rannatr Posted July 28, 2016 Author Share Posted July 28, 2016 Thanks, I got the general idea but I feel I'm too novice to implement it into my own code. Atleast didnt't work out quite well. Can you give me some example how I can implement this particularly in my case? kindest regards, Ragner Link to comment Share on other sites More sharing options...
davej Posted July 28, 2016 Share Posted July 28, 2016 var wrapper = document.getElementById("wrapper"); wrapper.onclick = function(evt) { if (evt.target.id == 'id1'){ // id1 was clicked on }else if (evt.target.id == 'id2'){ // id2 was clicked on }else{ // something else was clicked on } } Link to comment Share on other sites More sharing options...
rannatr Posted July 29, 2016 Author Share Posted July 29, 2016 Thanks alot! Everything sorted out, kindest regards Link to comment Share on other sites More sharing options...
rannatr Posted July 31, 2016 Author Share Posted July 31, 2016 var wrapper = document.getElementById("wrapper"); wrapper.onclick = function(evt) { if (evt.target.id == 'id1'){ // id1 was clicked on }else if (evt.target.id == 'id2'){ // id2 was clicked on }else{ // something else was clicked on } } You can see My final result for postage stamps gallery here: http://www.ragner.ee/en Kindest regards, Thank You very much Sir, R. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now