点击黑色方块仅最后一个方块变色，求问题原因分析

你遇到的这个问题，核心是多个IIFE里的事件绑定逻辑互相覆盖，导致只有最后一个方块的变色代码生效了。

具体来说，每个page1.js、page2.js、page3.js的IIFE里，应该都是直接给黑色方块（elementToClick）赋值onclick事件处理函数。但DOM元素的onclick属性是单一赋值的——后面的函数会直接覆盖掉前面的。比如你在page1.js里给onclick绑了一个函数，到page2.js又重新赋值一次，page3.js再赋值一次，最后就只有page3.js里的函数会在点击时执行，前面两个的逻辑直接被冲掉了。

把直接赋值onclick的方式，改成使用addEventListener来绑定事件。这个方法允许给同一个元素绑定多个事件处理函数，不会互相覆盖。

举个具体的修改例子，假设你原来的page1.js是这样的：

(function() {
  const targetElem = document.getElementById('elem1');
  // 初始化浅色样式
  targetElem.style.backgroundColor = '#e0e0e0';
  
  // 原来的绑定方式，会被覆盖
  document.getElementById('elementToClick').onclick = function() {
    targetElem.style.backgroundColor = targetElem.style.backgroundColor === '#e0e0e0' ? '#666' : '#e0e0e0';
  };
})();

改成addEventListener后：

(function() {
  const targetElem = document.getElementById('elem1');
  targetElem.style.backgroundColor = '#e0e0e0';
  
  // 改用addEventListener，不会被后续绑定覆盖
  document.getElementById('elementToClick').addEventListener('click', function() {
    targetElem.style.backgroundColor = targetElem.style.backgroundColor === '#e0e0e0' ? '#666' : '#e0e0e0';
  });
})();

同理把page2.js和page3.js里的事件绑定都改成这种方式，再加上all.js里红色方块的切换逻辑，点击黑色方块时四个目标方块就都会触发深浅切换了。

如果多个方块的切换逻辑很相似，可以把切换逻辑封装成通用函数放在all.js里，避免重复代码：

// all.js中定义通用切换函数
window.toggleShade = function(element, lightColor = '#e0e0e0', darkColor = '#666') {
  element.style.backgroundColor = element.style.backgroundColor === lightColor ? darkColor : lightColor;
};

// 然后在page1.js的IIFE里调用
(function() {
  const targetElem = document.getElementById('elem1');
  targetElem.style.backgroundColor = '#e0e0e0';
  
  document.getElementById('elementToClick').addEventListener('click', function() {
    toggleShade(targetElem);
  });
})();

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