页面刷新时实现正确与错误按钮随机切换位置的技术咨询

要解决正确按钮固定位置的问题，核心是随机打乱正确/错误按钮的添加顺序，具体实现步骤如下：

核心思路 #

1. 预先创建好正确按钮和错误按钮两个元素
2. 将两个按钮放入数组，通过随机排序打乱数组顺序
3. 按打乱后的顺序将按钮添加到页面容器中，确保每次刷新时按钮位置随机切换

修改后的完整代码 #

HTML（结构无需改动）

<div id="color"></div>
<div id="guess"></div>
<div id="dk"></div>
<div id="firstGuess"></div>

CSS（样式无需改动）

#color{
    background-color: #627246;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50% , -50%);   
}

JavaScript（关键修改部分）

// 合并重复的随机整数生成函数，专门生成6位十六进制数字
function generateRandomHexCode() {
    return Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;
}

// 生成正确颜色值并设置色块
const correctHex = generateRandomHexCode();
document.getElementById("color").style.backgroundColor = `#${correctHex}`;

// 显示正确答案提示
const answerTip = document.getElementById("dk");
answerTip.textContent = `Correct answer: ${correctHex}`;
document.querySelector("#guess").appendChild(answerTip);

// 创建正确按钮和错误按钮
const correctBtn = document.createElement("button");
correctBtn.textContent = correctHex;

const wrongHex = generateRandomHexCode();
const wrongBtn = document.createElement("button");
wrongBtn.textContent = wrongHex;

// 将按钮放入数组并随机打乱顺序
const buttons = [correctBtn, wrongBtn];
buttons.sort(() => Math.random() - 0.5);

// 将打乱后的按钮批量添加到容器中
const guessContainer = document.querySelector("#firstGuess");
buttons.forEach(btn => guessContainer.appendChild(btn));

关键代码说明 #

• 合并随机函数：删除重复定义的生成函数，统一为generateRandomHexCode，减少代码冗余。
• 随机排序逻辑：buttons.sort(() => Math.random() - 0.5)会随机返回正数或负数，让数组元素的顺序随机交换，实现按钮位置的随机切换。
• 批量添加按钮：通过forEach遍历打乱后的数组，依次添加按钮，确保每次刷新时两个按钮的位置不固定。

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