Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hello guys.. i have tried anything and i did not figure it out yet, so i came here full of optimism that someone will give me a hand..so, i have created 3 iframes, each iframe has a google maps location.i have also made 2 buttons, "prev" and "next", the prev button has a "disabled" attribute.i made them communicate with the iframes using JS, this is the JS CODE:
-------------------------------------------------------------------------------
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let map = Array.from(document.querySelectorAll('.myIframe'));
let currentlySelected = 0;


nextBtn = addEventListener("click", function () {
    map[currentlySelected].classList.remove("active");
    currentlySelected ++;
    map[currentlySelected].classList.add("active");
});


Now, i want the "prev" button to be enabled whenever there is an iframe to go back to..and another thing that gets me crazy is, that whenever the user clicks the "next" button 3 times (the number of the iframes that availble in the HTML) when the cycle is finished, everything disappears.
html code:

<div class="gmap_canvas">
                                    <iframe class="myIframe active" width="700" height="550"
                                     class="myIframe active" src="https://maps.google.com/maps?q=jerusalem&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="2" scrolling="no" marginheight="0" marginwidth="0">
                                    </iframe>
                                     <iframe class="myIframe" width="700" height="550"
                                     class="myIframe" src="https://maps.google.com/maps?q=eilat&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="2" scrolling="no" marginheight="0" marginwidth="0">
                                    </iframe>
                                    <iframe class="myIframe" width="700" height="550"
                                     class="myIframe" src="https://maps.google.com/maps?q=arad&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="2" scrolling="no" marginheight="0" marginwidth="0">
                                    </iframe>


how can i do it ?
thanks!!

What I have tried:

i tried to add to add an if statement, that will number the index, and if it is bigger or equals to 3 than the cycle continues.. but with no success..
also, prevBtn.disabled = false is not working to me..
whenever i type the .disabled, it gives me an error.. like, its not a real coding option or whatever..
would love to get help from u guys.. thanks!!
Posted
Updated 26-Sep-22 3:41am

1 solution

Quote:
... whenever the user clicks the "next" button 3 times (the number of the iframes that availble in the HTML) when the cycle is finished, everything disappears ...
Because you keep incrementing the currentlySelected variable, without checking whether you've gone past the end of the array.
JavaScript
nextBtn.addEventListener("click", function() {
    map[currentlySelected].classList.remove("active");
    
    currentlySelected++;
    // Wrap around at the end of the list:
    if (currentlySelected >= map.length) { currentlySelected = 0; }
    
    map[currentlySelected].classList.add("active");
});
You'll probably have the same problem with the prevBtn handler:
JavaScript
prevBtn.addEventListener("click", function() {
    map[currentlySelected].classList.remove("active");
    
    currentlySelected--;
    // Wrap around at the start of the list:
    if (currentlySelected < 0) { currentlySelected = map.length - 1; }
    
    map[currentlySelected].classList.add("active");
});

Quote:
Now, I want the "prev" button to be enabled whenever there is an iframe to go back to
Simple enough:
JavaScript
const updateNavButtons = function(){
    prevBtn.disabled = currentlySelected === 0;
    nextBtn.disabled = currentlySelected === map.length - 1;
};

nextBtn.addEventListener("click", function() {
    map[currentlySelected].classList.remove("active");
    
    currentlySelected++;
    // Wrap around at the end of the list:
    if (currentlySelected >= map.length) { currentlySelected = 0; }
    
    map[currentlySelected].classList.add("active");
    updateNavButtons();
});

prevBtn.addEventListener("click", function() {
    map[currentlySelected].classList.remove("active");
    
    currentlySelected--;
    // Wrap around at the start of the list:
    if (currentlySelected < 0) { currentlySelected = map.length - 1; }
    
    map[currentlySelected].classList.add("active");
    updateNavButtons();
});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900