JavaScript点击箭头仅显示当前周的上/下周问题及代码求助

Let's break down the problems in your code and fix them step by step:

What's Going Wrong? #

1. Old weeks don't hide: When you click the right arrow, you're just showing a new div without hiding the current one—so both stay visible.
2. Left arrow does nothing: If you're on the first week, lessFin - 1 becomes -1, which points to an undefined element in your array. Browsers ignore this error silently, so nothing happens. Plus, you weren't hiding the current week here either.

Fixed Full Code #

Here's the revised code with explanations of key changes:

HTML (minor cleanup)

<input type="button" onclick="prevWeek()" class="arrow" value="&larr;">
&nbsp;
<input type="button" onclick="nextWeek()" class="arrow" value="&rarr;" id="rArrow">

<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>

CSS (added UX improvement)

#decThirtyfirst, #janSeven, #janFourteen, #janTwentyone, #janTwentyeight{
 display: none;
}
h1{
 display: inline
}
.arrow {
  cursor: pointer; /* Makes buttons feel intuitively clickable */
}

JavaScript (core fixes here)

// Get week number function (unchanged)
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];
}

// Initialize variables
var result = getWeekNumber(new Date());
var fin = result[1];
var currentWeekIndex = fin - 1; // Track active week with a dedicated 0-based index

// Get all week divs in a single array (cleaner than individual variables)
var weekDivs = [
  document.getElementById('decThirtyfirst'),
  document.getElementById('janSeven'),
  document.getElementById('janFourteen'),
  document.getElementById('janTwentyone'),
  document.getElementById('janTwentyeight')
];

// Reusable function to handle showing a specific week
function showWeek(index) {
  // First hide all weeks to avoid overlapping content
  weekDivs.forEach(div => div.style.display = 'none');
  // Only show the target week if the index is within valid bounds
  if (index >= 0 && index < weekDivs.length) {
    weekDivs[index].style.display = 'block';
    currentWeekIndex = index; // Update the active index
  }
}

// Show the initial week when the page loads
showWeek(currentWeekIndex);

// Next week handler
function nextWeek() {
  // Prevent going beyond the last week in the list
  if (currentWeekIndex < weekDivs.length - 1) {
    showWeek(currentWeekIndex + 1);
  }
}

// Previous week handler
function prevWeek() {
  // Prevent going before the first week in the list
  if (currentWeekIndex > 0) {
    showWeek(currentWeekIndex - 1);
  }
}

Key Improvements: #

• Reusable showWeek function: Encapsulates the logic to hide all divs and show the target one, eliminating repeated code and adding safety checks for invalid indices.
• currentWeekIndex tracking: Uses a dedicated variable to keep track of the active week, avoiding confusion from modifying fin directly.
• Boundary checks: Stops users from navigating outside the available weeks, so no broken or silent error behavior.
• Cleaner array setup: Defines the weekDivs array directly instead of creating individual variables first, making the code more concise.

内容的提问来源于stack exchange，提问作者sunidhi