网站语言切换按钮报错：Uncaught TypeError: Cannot set property 'display' of undefined

Hey there! Let's break down what might be going wrong with your language toggle setup using display classes—since you mentioned you've already tried moving the script to the bottom and fixing getElementsByClassName, let's cover the most common pitfalls and fixes that might be causing your error.

Common Issues & Fixes #

1. You're trying to use classList directly on an HTMLCollection

getElementsByClassName returns an HTMLCollection (a live, array-like list of elements), not a single element. If you try to call .classList.toggle() on the entire collection, you'll get an error like "Cannot read properties of undefined (reading 'classList')".

Instead, you need to loop through each element in the collection:

const enElements = document.getElementsByClassName('en');
const zhElements = document.getElementsByClassName('zh');

function toggleLanguage() {
  // Loop through English elements
  for (let el of enElements) {
    el.classList.toggle('hidden');
  }
  // Loop through Chinese elements
  for (let el of zhElements) {
    el.classList.toggle('hidden');
  }
}

Alternatively, use querySelectorAll (returns a NodeList, which supports forEach for cleaner code):

const enElements = document.querySelectorAll('.en');
const zhElements = document.querySelectorAll('.zh');

function toggleLanguage() {
  enElements.forEach(el => el.classList.toggle('hidden'));
  zhElements.forEach(el => el.classList.toggle('hidden'));
}

2. Your .hidden CSS class isn't properly defined

Make sure your CSS explicitly hides elements with the hidden class—sometimes default styles or other rules can override it. Add this to your stylesheet:

.hidden {
  display: none !important; /* Use !important only if needed to override existing styles */
}

Also, set the initial state correctly in your HTML (e.g., default to showing Chinese, hide English):

<p class="zh">这是一段中文文本</p>
<p class="en hidden">This is English text</p>

3. Your event listener isn't attached correctly

If your toggle button isn't triggering the function, double-check that you're targeting the button properly and attaching the listener after the element exists (which your script-at-bottom setup should handle):

const toggleBtn = document.getElementById('language-toggle');
toggleBtn.addEventListener('click', toggleLanguage);

4. Understanding common error messages

• "Cannot read properties of undefined (reading 'classList')": You're trying to modify classList on a non-element (either the collection itself, or an element that doesn't exist).
• "toggleLanguage is not defined": Your function is defined after the event listener, or it's in a scope that the listener can't access. Move the function definition above the listener code.

Full Working Example #

Here's a complete, minimal setup you can compare against your code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }
    #language-toggle {
      padding: 8px 16px;
      cursor: pointer;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <button id="language-toggle">切换语言 / Toggle Language</button>

  <h1 class="zh">欢迎来到我的网站</h1>
  <h1 class="en hidden">Welcome to My Website</h1>

  <p class="zh">这是一段中文描述，点击按钮切换语言。</p>
  <p class="en hidden">This is an English description—click the button to switch languages.</p>

  <script>
    // Get all language elements
    const enElements = document.querySelectorAll('.en');
    const zhElements = document.querySelectorAll('.zh');
    const toggleBtn = document.getElementById('language-toggle');

    // Toggle function
    function toggleLanguage() {
      enElements.forEach(el => el.classList.toggle('hidden'));
      zhElements.forEach(el => el.classList.toggle('hidden'));
    }

    // Attach click event
    toggleBtn.addEventListener('click', toggleLanguage);
  </script>
</body>
</html>

If you share the exact error message you're seeing, I can narrow down the issue even further!

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