编写复选框状态弹窗代码遇Maximum call stack size exceeded错误求助

Hey there! Let's break down what's causing that Unhandled exception: maximum call stack size exceeded error you're seeing—it actually doesn't have much to do with ES6, so no need to stress about your ES6 knowledge right now.

Why this error happens #

This stack overflow issue almost always comes from an infinite event loop. Here's the most common scenario with checkboxes:

• You attach a change event listener to your checkbox
• Inside that listener, you accidentally modify the checkbox's checked property directly (like setting checkbox.checked = true or false)
• Changing checked triggers the change event again... which runs your listener again... which changes checked again... and this loops forever until the browser's call stack is full.

Fix it with a clean event listener #

Here's a simple, working example that does exactly what you need without the loop:

// Grab your checkbox element (replace with your actual selector)
const myCheckbox = document.getElementById('myCheckbox');

// Add a change event listener
myCheckbox.addEventListener('change', function() {
  if (this.checked) {
    alert('复选框已勾选！');
  } else {
    alert('复选框未勾选！');
  }
});

What to avoid #

Double-check your code for something like this (the mistake that causes the loop):

// ❌ BAD CODE - causes infinite loop!
myCheckbox.addEventListener('change', function() {
  if (this.checked) {
    alert('已勾选');
    this.checked = true; // This re-triggers the change event
  } else {
    alert('未勾选');
    this.checked = false; // Same problem here
  }
});

You don't need to manually set checked in the listener— the user's click already changed that state, and the event is just reacting to it.

Quick recap #

1. Remove any lines in your event listener that modify the checkbox's checked property directly
2. Make sure your listener only reacts to the existing state, not tries to set it again

That should clear up the stack overflow error right away!

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