实现JS找异色圆点功能时，RGB相等为何alert对比仍返回false？

1. 颜色字符串格式天生不匹配 #

你手动拼接的odd_color格式类似rgb(120,135,150)，所有逗号后没有加空格。但浏览器通过window.getComputedStyle()返回的计算后背景色，固定是带空格的格式：rgb(120, 135, 150)，每个逗号后会自动补一个空格。
视觉上看两个值完全一致，但做严格字符串等值比对时，因为空格的存在，两边字符串长度都不一样，结果永远是false。

2. alert代码嵌套错位，比对逻辑完全走偏 #

你当前写的比对代码，括号位置写错了，实际执行逻辑和你想的完全不一样：

// 原始错误写法
alert(
  window.getComputedStyle(circle1).getPropertyValue("background-color") 
  == odd_color + " " + alert(
    window.getComputedStyle(circle1).getPropertyValue("background-color") + " " + odd_color
  )
)

这段代码实际运行流程是：

• 先执行内部嵌套的alert，弹窗显示两个颜色值，而alert本身没有返回值，返回值是undefined
• 再把odd_color、空格、这个undefined拼接成一个全新的字符串
• 拿这个拼接出来的、掺杂了undefined的字符串，和实际获取到的圆点颜色值做比对
• 最后把比对结果弹出来
  你以为比对的是两个纯颜色值，实际比对的是完全不对的拼接字符串，结果自然和预期差很远。

3. 连带的初始化bug #

页面加载完成后，你从来没有主动调用过update()函数，所以初始状态所有圆点都是CSS里写的默认黑色#000，根本没生成过异色圆点，第一次点击全点在黑圆点上，自然显示黑色。 #

• 统一颜色字符串格式：拼接自定义颜色值的时候，主动在逗号后加空格，和浏览器返回的格式保持一致；或者比对前用replace(/\s/g, '')把两边的空格全部移除，再做等值判断
• 拆分alert逻辑：先把获取到的实际颜色值、预设的异色值单独存为变量，确认变量值符合预期后再做比对，绝对不要在alert内部嵌套alert
• 删掉9个几乎完全重复的点击处理函数：给所有圆点元素统一绑定同一个点击事件，通过事件对象拿到当前被点击的元素，大幅减少冗余代码
• 页面加载完成后第一时间调用update()，初始化第一组圆点的颜色
• 调整游戏流程：点击圆点时先判断是否点中正确的异色点，确认命中后再加分、生成下一组颜色，避免点错也直接换色的逻辑bug

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