CodeHS JavaScript圆形变色程序：无法让全部圆形变色的问题咨询

你碰到的这个问题很典型——你没有保存所有创建的圆形实例引用，导致update函数只能操作最后一个创建的圆形，而不是全部15个。咱们一步步来修复：

问题根源 #

在你的drawCircles函数里，circle变量没有用var/let声明，它会变成全局变量。循环结束后，这个变量只会指向最后一个创建的圆形，所以update里根本找不到其他14个圆。

修复步骤 #

1. 全局声明一个数组存储所有圆形：我们需要把每个创建的圆都存起来，这样后续才能遍历修改它们的颜色。
2. 修改drawCircles，把每个圆加入数组：创建圆的时候用let限制变量作用域，然后推到数组里。
3. 完善update函数，遍历数组修改颜色：循环数组里的每个圆，给它们设置随机颜色。

修正后的完整代码 #

var NUM_CIRCLES = 15;
var MIN_RADIUS = 10;
var MAX_RADIUS = 40;
var DELAY = 500;
// 新增：存储所有圆形的数组
var circles = [];

function start(){
    drawCircles();
    setTimer(update, DELAY);
}

function drawCircles(){
    for(var i = 0; i < NUM_CIRCLES; i++){
        // 用let声明circle，避免全局污染
        let circle = new Circle(Randomizer.nextInt(MIN_RADIUS, MAX_RADIUS));
        var x = Randomizer.nextInt(MIN_RADIUS, getWidth() - MAX_RADIUS);
        var y = Randomizer.nextInt(MIN_RADIUS, getHeight() - MAX_RADIUS);
        circle.setPosition(x, y);
        add(circle);
        // 将当前圆加入数组
        circles.push(circle);
    }
}

function update(){
    // 遍历所有圆形，逐个设置随机颜色
    for(let i = 0; i < circles.length; i++){
        let randomColor = Randomizer.nextColor();
        circles[i].setColor(randomColor);
    }
}

额外说明 #

• 用let代替无声明的变量是个好习惯，能避免意外的全局变量污染，让代码更可控。
• 如果想要每个圆的颜色独立随机变化（不是所有圆同时变同一个颜色），当前的代码已经实现了——每次循环都会生成新的随机颜色给每个圆。如果想让所有圆同时变同一个颜色，只需要把randomColor的声明移到循环外面即可。

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