表单输入进度条动画实现求助：填写时宽度增加20

Hey there! Let's work through getting your form progress bar to increase by 20% each time a user fills out a field. I'll break down both the HTML structure and JavaScript logic, plus point out common snags that might be stopping it from working.

You need a proper progress bar container and form fields to work with. Here's a solid starting point:

<!-- Progress bar wrapper -->
<div class="progress-container">
  <div id="progress-bar" class="progress-bar"></div>
</div>

<!-- Sample form with 5 fields (each contributing 20% to progress) -->
<form id="user-form">
  <div class="form-group">
    <label for="full-name">Full Name:</label>
    <input type="text" id="full-name" name="full-name" required>
  </div>
  <div class="form-group">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" required>
  </div>
  <div class="form-group">
    <label for="location">Location:</label>
    <input type="text" id="location" name="location" required>
  </div>
  <div class="form-group">
    <label for="bio">Short Bio:</label>
    <textarea id="bio" name="bio" required></textarea>
  </div>
</form>

Add some basic CSS to make the progress bar visible and styled:

.progress-container {
  width: 100%;
  height: 24px;
  background-color: #f0f0f0;
  border-radius: 12px;
  margin: 20px 0;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #2196F3;
  transition: width 0.3s ease; /* Smooth animation when updating */
}

.form-group {
  margin-bottom: 16px;
}

The core logic is listening for user input on form fields, tracking which are filled, and updating the progress bar's width. Since you want each filled field to add 20% (perfect for 5 fields total), here's how to implement that:

// Wait for the DOM to fully load before running code
document.addEventListener('DOMContentLoaded', () => {
  const progressBar = document.getElementById('progress-bar');
  const form = document.getElementById('user-form');
  const allFields = form.querySelectorAll('input, textarea');
  const progressPerField = 20; // Fixed 20% per field
  let currentProgress = 0;

  // Track if each field has been filled to avoid duplicate progress increases
  const fieldFilledStatus = Array.from(allFields).map(() => false);

  // Add input listeners to each field
  allFields.forEach((field, index) => {
    field.addEventListener('input', () => {
      const isCurrentlyFilled = field.value.trim() !== '';
      const wasPreviouslyFilled = fieldFilledStatus[index];

      // If field just got filled, add 20% progress
      if (isCurrentlyFilled && !wasPreviouslyFilled) {
        currentProgress += progressPerField;
        fieldFilledStatus[index] = true;
      }
      // If field was cleared, subtract 20% progress
      else if (!isCurrentlyFilled && wasPreviouslyFilled) {
        currentProgress -= progressPerField;
        fieldFilledStatus[index] = false;
      }

      // Ensure progress stays between 0% and 100%
      currentProgress = Math.max(0, Math.min(100, currentProgress));
      // Update the progress bar's width
      progressBar.style.width = `${currentProgress}%`;
    });
  });
});

If your progress bar isn't updating, check these common mistakes:

• Mismatched IDs: Double-check that the ID in getElementById matches exactly what's in your HTML (e.g., progress-bar vs. progressbar will break things).
• DOM Load Order: If your JS runs before the HTML elements exist, it can't find them. Wrap your code in DOMContentLoaded (like the example above) or place your script right before the closing </body> tag.
• Missing CSS: If the progress bar is invisible, confirm your CSS is loaded correctly—make sure the container has a set height, and the progress bar starts at width: 0%.
• Incorrect Field Selection: If you have <select> elements or other input types, add them to the querySelectorAll list (e.g., input, textarea, select).
• Duplicate Progress Increments: Without tracking if a field was already filled, you might add 20% every time the user types a character. The fieldFilledStatus array in the example fixes this.

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