如何显示数组中项目的“下一个”和“上一个”按钮？

Question

Im trying to use a array who contains 4 diferent maps. The first element of the array must be "sticked" and change the current element of the array by clicking next. The next button when it reaches to the last item of the array must be showed disabled. The previous button is disabled and when the next is clicked it should be unabled. Im pretty lost right now any suggestion or advice will be very welcomed

 var i = 0; var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=.1m18.1m12;1m3.1d92110.09563909167;2d17.958933187703266.3d59;32686333113927;2m3.1f0;2f0;3f0.3m2;1i1024;2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; document.getElementById('myIframe').src = mapsArray[Math.floor(Math.random() * mapsArray.length)]; const prevBtn = document.querySelector(".prev"); const nextBtn = document.querySelector(".next"); function nextBtn() { i = i + 1; i = i % mapsArray.length; return mapsArray[i]; } function prevBtn() { if (i === 0) { i = mapsArray.length; } i = i - 1; return mapsArray[i] }

 .maps { display: flex; justify-content: center; align-items: center; } #myIframe { width: 600px; height: 600px; }

 <div class="maps"> <iframe id='myIframe' class="maps-gallery active"></iframe> </div> <div class="btns"> <button disabled onclick="nextBtn()" class="btn prev">Prev</button> <button onclick="prevBtn()" class="btn next">Next</button>

Answer 1

1. you can not have button name and function calling the same name hence the error in console.

2. save your iframe in variable and then do iFrame.src = mapsArray[i] inside both back and next functions.

3. Check the index numbers in functions and accordingly disable the buttons based on first/last/middle number of index array.

 var i = 0; var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=.1m18.1m12;1m3.1d92110.09563909167;2d17.958933187703266.3d59;32686333113927.2m3.1f0.2f0.3f0:3m2.1i1024.2i768.4f13:1.3m3;1m2;1s0x465f763119640bcb%3A0xa80d27d3679d7766.2sStockholm%2C%20Sweden.5e0:3m2.1sen.2suy.4v1614704350417.5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; let iFrame = document.getElementById('myIframe') iFrame.src = mapsArray[Math.floor(Math.random() * mapsArray.length)]; const prevB = document.querySelector(".prev"); const nextB = document.querySelector(".next"); function nextBtn() { console.clear() if (i >= 0 && i < 3) { iFrame.src = mapsArray[i] prevB.disabled = false console.log("next button array index set:" + i) i++ } else { iFrame.src = mapsArray[i] nextB.disabled = true console.log("next button array index set:" + i) i++ } } function prevBtn() { if (i === 0) { i = mapsArray.length; } i = i - 1; console.clear() console.log("prev array index:" + i) if (i <= 3 && i > 0) { iFrame.src = mapsArray[i] nextB.disabled = false } else { iFrame.src = mapsArray[i] prevB.disabled = true } }

 .maps { display: flex; justify-content: center; align-items: center; } #myIframe { width: 150px; height: 150px; }

 <div class="maps"> <iframe id='myIframe' class="maps-gallery active"></iframe> </div> <div class="btns"> <button disabled onclick="prevBtn()" class="btn prev">Prev</button> <button onclick="nextBtn()" class="btn next">Next</button> </div>

Answer 2

This should work:

 var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=;1m18.1m12.1m3;1d92110.09563909167;2d17;958933187703266.3d59;32686333113927.2m3;1f0;2f0.3f0;3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; var i = Math.floor(Math.random() * mapsArray.length); var iFrameElement = document.getElementById('myiFrame') iFrameElement .src = mapsArray[i]; function nextBtn() { if (i === mapsArray.length) i = 0; else i += 1; iFrameElement.src = mapsArray[i]; } function prevBtn() { if (i === 0) i = mapsArray.length; else i -= 1; iFrameElement.src = mapsArray[i]; }

 .maps { display: flex; justify-content: center; align-items: center; } #myiFrame { width: 600px; height: 600px; }

 <div class="maps"> <iframe id="myiFrame"></iframe> </div> <div class="btns"> <button onclick="nextBtn()">Prev</button> <button onclick="prevBtn()">Next</button> </div>

Answer 3

Here is a simple approach -->

 var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www;google.com/maps/embed.pb=;1m18.1m12.1m3;1d92110;09563909167.2d17.958933187703266;3d59;32686333113927.2m3;1f0.2f0;3f0;3m2;1i1024.2i768;4f13;1.3m3;1m2.1s0x465f763119640bcb%3A0xa80d27d3679d7766.2sStockholm%2C%20Sweden;5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; var index = 0; const _prevBtn = document.querySelector(".prev"); const _nextBtn = document.querySelector(".next"); update(); function update() { document.getElementById('myIframe').src = mapsArray[index]; btnDisableCheck(); } function nextBtn() { if (index < mapsArray.length - 1) { index++; _prevBtn.disabled = false; update(); } } function prevBtn() { if (index > 0) { index--; _nextBtn.disabled = false; update(); } } function btnDisableCheck() { if (index == 0) _prevBtn.disabled = true; if (index == mapsArray.length - 1) _nextBtn.disabled = true; }

 <iframe id='myIframe' class="maps-gallery active"></iframe> <button onclick="prevBtn()" class="btn prev">Prev</button> <button onclick="nextBtn()" class="btn next">Next</button>

Answer 4

I think this is what you want, but i had to change a few things:

 var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google;com/maps/embed.pb=;1m18.1m12;1m3.1d92110.09563909167.2d17;958933187703266.3d59;32686333113927.2m3.1f0;2f0.3f0;3m2.1i1024;2i768.4f13;1.3m3;1m2.1s0x465f763119640bcb%3A0xa80d27d3679d7766;2sStockholm%2C%20Sweden.5e0;3m2;1sen;2suy;4v1614704350417;5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; var myIframe = document.getElementById('myIframe'); var prevButton = document.getElementById('prevBtn'); var nextButton = document.getElementById('nextBtn'); var i = Math.floor(Math.random() * mapsArray.length); function update() { myIframe.src = mapsArray[i]; if ( i == mapsArray.length - 1 ) { prevButton.disabled = false; nextButton.disabled = true; } else if ( i == 0 ) { prevButton.disabled = true; nextButton.disabled = false; } else { prevButton.disabled = false; nextButton.disabled = false; } } function nextBtn() { if ( i < mapsArray.length - 1 ) { i++; } update(); } function prevBtn() { if (i > 0) { i--; } update(); } update();

 .maps{ display: flex; justify-content: center; align-items: center; } #myIframe { width: 600px; height: 600px; }

 <div class ="maps"> <iframe id='myIframe' class="maps-gallery active"></iframe> </div> <div class="btns"> <button id="prevBtn" onclick="prevBtn()" class="btn prev">Prev</button> <button id="nextBtn" onclick="nextBtn()" class= "btn next" >Next</button> </div>

Answer 5

Here is a minimalist solution to your problem. The short style probably is not everybody's but it shows how little you need to write to actually reproduce the logic.

The core of the random sequencing of array elements is the shuffling of the array according to Fisher-Yates. After that I simply step through the shuffled array and enable/disable the buttons accordingly.

 function shuffle(a,n){ // shuffle array a in place (Fisher-Yates) let m=a.length; n=n||m-1; for(let i=0,j;i<n;i++){ j=Math.floor(Math.random()*(mi)+i); if (ji) [ a[i],a[j] ] = [ a[j],a[i] ]; // swap 2 array elements }; return a } const mapsArray = shuffle([ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google,com/maps/embed.pb=;1m18.1m12;1m3.1d92110;09563909167.2d17,958933187703266.3d59.32686333113927;2m3.1f0;2f0.3f0;3m2;1i1024.2i768;4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881 494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy"]); btns=document.querySelectorAll("button"), trgt=document.getElementById('myIframe'); trgt.src=mapsArray[0]; (i=>{ let n=mapsArray.length; btns.forEach((b,k)=>b.onclick=()=>{ trgt.src=mapsArray[i=i+2*k-1]; btns[0].disabled=!i; btns[1].disabled=(i+1===n); }) })(1); btns[0].click();

 .maps { display: flex; justify-content: center; align-items: center; } #myIframe { width: 600px; height: 600px; }

 <iframe id='myIframe' class="maps-gallery active"></iframe><br> <button>Prev</button> <button>Next</button>

The main function is embedded in an IIFE that encapsulates the current position index i and sets it to 0 as the starting value. The only "visible" global elements are the function shuffle() and the array mapsArray itself. For the actual stepping I apply a little trick: while in the .forEach() loop I use the index k to determine whether next (=1) or previous (=0) was clicked and then I calculate the increment accordingly.