Javascript HTML/Js/Css-选择一个随机元素来更改颜色

这基本上是（有点）我第一次编码！我想做一个html游戏放在一个网站上

它有9个盒子，它们是蓝色的。有些盒子是橙色的。每当单击橙色框时，它将变为蓝色！任务是尽快使所有的盒子变成蓝色

当所有框都是蓝色时，您可以单击按钮刷新页面，这将显示一对不同的橙色框。我有一些代码可以部分工作

我不知道如何使我的代码随机选择一些框，将它们更改为橙色。（我也没有做刷新页面的按钮）。我不太擅长解释或编码，但这里是我到目前为止所拥有的

函数setColor（e）{
var目标=e.target，
count=+target.dataset.count；
target.style.backgroundColor=count==1？#08AED4:“#D4A108”；
target.dataset.count=count==1？0:1；
}

#框1{
位置：相对位置；
边框左上半径：80px；
边框右上角半径：25px；
边框右下半径：25px；
边框左下半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#框2{
位置：相对位置；
底部：10px；
边界半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#框3{
位置：相对位置；
底部：20px；
边框左上半径：25px；
边框右上角半径：25px；
边框右下半径：25px；
边框左下半径：80px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#方框4{
位置：相对位置；
左：215px；
底部：678px；
边界半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#方框5{
位置：相对位置；
左：215px；
底部：688px；
边界半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#方框6{
位置：相对位置；
左：215px；
底部：698px；
边界半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#框7{
位置：相对位置；
左：430px；
底部：1355px；
边框左上半径：25px；
边框右上角半径：80px；
边框右下半径：25px；
边框左下半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#方框8{
位置：相对位置；
左：430px；
底部：1366px；
边界半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}
#框9{
位置：相对位置；
左：430px；
底部：1377px；
边框左上半径：25px；
边框右上角半径：25px；
边框右下半径：80px；
边框左下半径：25px；
背景色：青色；
宽度：200px；
高度：200px；
边框：5px纯灰；
}

您可以使用此功能（针对一个方框）并在循环中重复此功能，以获得更多橙色方框

function selectBoxes() {

        var box1 = document.getElementById('box1'); //storing boxen in variables
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var box4 = document.getElementById('box4');
        var box5 = document.getElementById('box5');
        var box6 = document.getElementById('box6');
        var box7 = document.getElementById('box7');
        var box8 = document.getElementById('box8'); 
        var box9 = document.getElementById('box9');
        
        var boxes = [];
        boxes.push(box1, box2, box3, box4, box5, box6, box7, box8, box9); //putting boxes in an array
        console.log(boxes);
        
        
        var boxToChangeNum = Math.floor(Math.random() * 9); //random number from 0 to 8
        boxes[boxToChangeNum].style.backgroundColor = "#D4A108"; //changing style of the selected box

    }

您可以使用此函数（对于一个框）并在循环中重复该函数以获得更多橙色框

function selectBoxes() {

        var box1 = document.getElementById('box1'); //storing boxen in variables
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var box4 = document.getElementById('box4');
        var box5 = document.getElementById('box5');
        var box6 = document.getElementById('box6');
        var box7 = document.getElementById('box7');
        var box8 = document.getElementById('box8'); 
        var box9 = document.getElementById('box9');
        
        var boxes = [];
        boxes.push(box1, box2, box3, box4, box5, box6, box7, box8, box9); //putting boxes in an array
        console.log(boxes);
        
        
        var boxToChangeNum = Math.floor(Math.random() * 9); //random number from 0 to 8
        boxes[boxToChangeNum].style.backgroundColor = "#D4A108"; //changing style of the selected box

    }

---

欢迎来到编码世界！您可以使用

Math.random（）

获取表示一个方框的随机数。执行如下操作：

constboxnumber=getRandomInt（1,10）

获取哪个框，然后使用

document.getElementById

获取框，类似于：

document.getElementById（`box${boxNumber}'）.style.backgroundColor=“#08AED4”

@MarkusMaga不太确定我是否在回复你，哈哈。我真的搞不懂。我正在使用w3tryit编辑器和codepen.io。当我粘贴

constboxnumber=getRandomInt（1,10）时；document.getElementById（`box${boxNumber}`）.style.backgroundColor=“#08AED4”

进入codepen.io的JS部分，它表示“未捕获引用错误：未定义getRandomInt”。如果查看链接，您可以找到如何编写

getRandomInt

函数的示例！注释

函数getRandomInt（min，max）{min=Math.ceil（min）；max=Math.floor（max）；return Math.floor（Math.random（）*（max-min）+min）；}

@MarkusMaga我想我成功了！但是它一次只能选一个盒子，我如何让它一次选3个、4个或5个盒子？你可以使用for循环或while循环多次随机选一个盒子。因为它是随机的，所以你当然可以多次拾取同一个盒子。因此，您可以尝试在循环时创建一个

，并检查您尝试更改的框是否已经具有您想要的颜色，如果是，请继续循环，直到找到一个您没有更改的框。欢迎来到编码世界！您可以使用
Math.random（）
获得随机数