仅显示数组onclick中的上一个，当前或下一个变量

Question

Basically for my javascript code, what I want to occur is that when the user clicks on the arrow, a different date and div element appears. So when the user clicks the right arrow, the next week is shown and, when the user clicks the left arrow, the previous week is shown.

Whenever the user right clicks, the next week is shown but the week before it is still visible. On the flip side, whenever the user left clicks, the week before is not shown and nothing happens.

How can I make it so that when the user clicks the arrows, only one week is shown that is also immediately before or after the currently displayed week?

below is my code:

 //get week number function getWeekNumber(d) { d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7)); var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1)); var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7); return [d.getUTCFullYear(), weekNo]; } var result = getWeekNumber(new Date()); var fin = result[1]; //div variables var decThirtyfirst = document.getElementById('decThirtyfirst'); var janSeven = document.getElementById('janSeven'); var janFourteen = document.getElementById('janFourteen'); var janTwentyone = document.getElementById('janTwentyone'); var janTwentyeight = document.getElementById('janTwentyeight'); //div variables to array var weekDivs = [decThirtyfirst, janSeven, janFourteen, janTwentyone, janTwentyeight]; //show current week var displayDiv = weekDivs[fin - 1]; displayDiv.style.display = "block"; //show next week function nextWeek() { var d = new Date(); var x = 1; var newFin = fin+= x; //display div var newDiv = weekDivs[newFin - 1]; newDiv.style.display = "block"; } //WEEK BEFORE function prevWeek() { var d = new Date(); var x = 1; var lessFin = fin-= x; //display div var newDiv = weekDivs[lessFin - 1]; newDiv.style.display = "block"; } 

 #decThirtyfirst, #janSeven, #janFourteen, #janTwentyone, #janTwentyeight{ display: none; } h1{ display: inline } 

 <input type="button" onclick="prevWeek()" class="arrow" value="&larr;"></input> &nbsp; <input type="button" onclick="nextWeek()" class="arrow" value="&rarr;" id="rArrow"></input> <div id="decThirtyfirst">12/31 to 1/6</div> <div id="janSeven">1/7 to 1/13</div> <div id="janFourteen">1/14 to 1/20</div> <div id="janTwentyone">1/21 to 1/27</div> <div id="janTwentyeight">1/28 to 2/3</div> 

Answer 1

What you can do is to hide all week divs before displaying the new one you want to show. Additionally I corrected prevWeek and nextWeek functions so that the code doesn't throw an error when you try to access before the first element or after the last one in the array.

 //get week number function getWeekNumber(d) { d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7)); var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1)); var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7); return [d.getUTCFullYear(), weekNo]; } var result = getWeekNumber(new Date()); var fin = result[1]; //div variables var decThirtyfirst = document.getElementById('decThirtyfirst'); var janSeven = document.getElementById('janSeven'); var janFourteen = document.getElementById('janFourteen'); var janTwentyone = document.getElementById('janTwentyone'); var janTwentyeight = document.getElementById('janTwentyeight'); //div variables to array var weekDivs = [decThirtyfirst, janSeven, janFourteen, janTwentyone, janTwentyeight]; //show current week var displayDiv = weekDivs[fin - 1]; displayDiv.style.display = "block"; //show next week function nextWeek() { var d = new Date(); var x = 1; //condition depends on your indexing (yours starts with 1) if(fin + x <= weekDivs.length){ var newFin = fin+= x; //hide divs for(var key = 0; key < weekDivs.length; key++){ weekDivs[key].style.display = "none"; } //display div var newDiv = weekDivs[newFin - 1]; newDiv.style.display = "block"; } } //WEEK BEFORE function prevWeek() { var d = new Date(); var x = 1; //condition depends on your indexing (yours starts with 1) if(fin - x > 0){ var lessFin = fin-= x; //hide divs for(var key = 0; key < weekDivs.length; key++){ weekDivs[key].style.display = "none"; } //display div var newDiv = weekDivs[lessFin - 1]; newDiv.style.display = "block"; } } 

 #decThirtyfirst, #janSeven, #janFourteen, #janTwentyone, #janTwentyeight{ display: none; } h1{ display: inline } 

 <input type="button" onclick="prevWeek()" class="arrow" value="&larr;"></input> &nbsp; <input type="button" onclick="nextWeek()" class="arrow" value="&rarr;" id="rArrow"></input> <div id="decThirtyfirst" class="dateDiv">12/31 to 1/6</div> <div id="janSeven" class="dateDiv">1/7 to 1/13</div> <div id="janFourteen" class="dateDiv">1/14 to 1/20</div> <div id="janTwentyone" class="dateDiv">1/21 to 1/27</div> <div id="janTwentyeight" class="dateDiv">1/28 to 2/3</div>