JavaScript实现用户名多类元素批量显示问题咨询

Solution for Batch Displaying Usernames in Your Gamebook Engine #

Hey there! Let's fix that batch display issue for your Gamebook Engine's username feature. Here's how you can handle multiple .displayUserName elements smoothly:

Step 1: Get all target elements correctly #

Instead of your partial document.g... attempt, use document.querySelectorAll('.displayUserName') — this returns a NodeList containing every element with the displayUserName class, which is perfect for batch operations.

Step 2: Update the displayUserName() function to handle multiple elements #

Modify your function to loop through the NodeList and set the username text for each element. Here's a complete, tested implementation example:

// Save username from input field
function setUserName() {
  const inputElement = document.getElementById('setUserNameInput');
  const username = inputElement.value.trim();
  
  if (username) {
    // Store username (using localStorage for persistence across page reloads)
    localStorage.setItem('gamebookUsername', username);
    // Trigger immediate display update after saving
    displayUserName();
    // Optional: Clear input after successful save
    inputElement.value = '';
  } else {
    alert('Please enter a valid username!');
  }
}

// Load and display username across all target elements
function displayUserName() {
  // Fetch all elements with the displayUserName class
  const displayElements = document.querySelectorAll('.displayUserName');
  // Retrieve stored username (fallback to a default if none exists)
  const username = localStorage.getItem('gamebookUsername') || 'Adventurer';
  
  // Loop through each element and inject the username
  displayElements.forEach(element => {
    element.textContent = username;
  });
}

// Initialize username display when the page finishes loading
document.addEventListener('DOMContentLoaded', displayUserName);

Key Tips: #

• querySelectorAll works across all modern browsers and avoids the "live collection" quirks of document.getElementsByClassName (which can cause unexpected behavior if your DOM changes dynamically).
• If you need to support very old browsers (pre-ES6), convert the NodeList to an array first with Array.from(displayElements) before using forEach.
• The localStorage integration ensures the username persists even if the user closes and reopens the gamebook — skip this if you only want the username to last for the current session.

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