RGB颜色游戏randomDiv函数中color_fix关联if块偶发失效求助

我正在开发一款RGB颜色猜谜游戏，遇到一个问题：刷新页面时，randomDiv()函数里和color_fix相关的if代码块有时正常工作，有时失效。可以通过点击浏览器刷新按钮复现该问题，请求帮忙解决。

相关代码 #

HTML

<body>
  <main>
    <div id="first_div">
      <h4>THE GREAT</h4>
      <h5>GUESSING GAME</h5>
    </div>
    <div id="second_div">
      <button id="newColor">New Color</button>
      <button id="playAgain">Play Again</button>
      <button id="tryAgain">Try Again</button>
      <button id="correct">Correct</button>
      <button id="easy">Easy</button>
    </div>
    <div id="color_div">

    </div>
  </main>
  <script src="app.js"></script>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  justify-content: center;
}

h4,
h5 {
  color: #ffffff;
  font-size: 40px;
}

#first_div {
  width: 900px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#color_div {
  height: 400px;
  width: 100%;
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dynamacily_create_div {
  width: 200px;
  height: 200px;
  border-radius: 25px;
  margin: 10px;
  border: 1px solid red;
}

JavaScript

let first_div = document.getElementById('first_div');
let h4 = document.querySelector('h4');
let h1 = document.createElement('h1');
let color_div = document.querySelector('#color_div');
let createDiv;

h4.style.alignItems = 'center';
h4.append(h1);
let valueRGB = rgb();
h1.innerText = valueRGB.toUpperCase();
h1.style.alignItems = 'center';
first_div.style.backgroundColor = rgb();

function rgb() {
  let r = Math.floor(Math.random() * 255 + 0);
  let g = Math.floor(Math.random() * 255 + 0);
  let b = Math.floor(Math.random() * 255 + 0);
  return (`rgb(${r}, ${g}, ${b})`);
}

function threeRandomNumber() {
  let threeRandomNumber = Math.floor(Math.random() * 3 + 1);
  return threeRandomNumber;
}

function divCreate() {
  createDiv = document.createElement('div');
  createDiv.classList = 'dynamacily_create_div';
  createDiv.style.backgroundColor = `${rgb()}`;
  return createDiv;
}

function randomDiv() {
  let color_fix = threeRandomNumber();
  console.log('outter Background ' + color_fix);
  for (let i = 0; i < 3; i++) {
    let div_fix = threeRandomNumber();
    if (div_fix === 1) {
      color_div.appendChild(divCreate());
      console.log('outter Background inner' + color_fix);
      if (color_fix === 1) {
        createDiv.style.backgroundColor = valueRGB;
        console.log(valueRGB);
        console.log('inner Background ' + color_fix);
      }
    } else if (div_fix === 2) {
      color_div.appendChild(divCreate());
      console.log('outter Background inner' + color_fix);
      if (color_fix === 2) {
        createDiv.style.backgroundColor = valueRGB;
        console.log(valueRGB);
        console.log('inner Background ' + color_fix);
      }
    } else {
      color_div.appendChild(divCreate());
      console.log('outter Background inner' + color_fix);
      if (color_fix === 3) {
        createDiv.style.backgroundColor = valueRGB;
        console.log(valueRGB);
        console.log('inner Background ' + color_fix);
      }
    }
  }

}
randomDiv()

问题根源 #

原代码的核心错误在于randomDiv()函数的逻辑设计：

1. 循环中每次调用threeRandomNumber()生成div_fix，这会导致无法保证生成恰好3个不重复的div位置——比如可能连续生成3次div_fix=1，只会添加3个对应位置的div，而color_fix如果是2，就根本不会触发对应的if块，导致目标颜色无法显示。
2. 全局变量createDiv容易被意外覆盖，虽然不是直接引发问题的原因，但会增加代码的不可预测性。

解决方案 #

调整randomDiv()的逻辑，确保每次循环生成一个div，并直接根据循环位置判断是否为color_fix指定的目标位置，同时去掉全局变量避免意外。

修改后的JavaScript代码：

let first_div = document.getElementById('first_div');
let h4 = document.querySelector('h4');
let h1 = document.createElement('h1');
let color_div = document.querySelector('#color_div');

h4.style.alignItems = 'center';
h4.append(h1);
let valueRGB = rgb();
h1.innerText = valueRGB.toUpperCase();
h1.style.alignItems = 'center';
first_div.style.backgroundColor = rgb();

function rgb() {
  let r = Math.floor(Math.random() * 255 + 0);
  let g = Math.floor(Math.random() * 255 + 0);
  let b = Math.floor(Math.random() * 255 + 0);
  return (`rgb(${r}, ${g}, ${b})`);
}

function threeRandomNumber() {
  let threeRandomNumber = Math.floor(Math.random() * 3 + 1);
  return threeRandomNumber;
}

// 改用局部变量，移除全局createDiv
function divCreate() {
  let div = document.createElement('div');
  div.classList = 'dynamacily_create_div';
  div.style.backgroundColor = rgb();
  return div;
}

function randomDiv() {
  let color_fix = threeRandomNumber();
  console.log('目标div位置: ' + color_fix);
  // 循环3次，确保生成3个div
  for (let i = 0; i < 3; i++) {
    let currentDiv = divCreate();
    // 判断当前循环的位置（i+1对应1/2/3）是否等于目标位置color_fix
    if (i + 1 === color_fix) {
      currentDiv.style.backgroundColor = valueRGB;
      console.log('已将第' + color_fix + '个div设置为目标颜色: ' + valueRGB);
    }
    color_div.appendChild(currentDiv);
  }
}
randomDiv()

修改关键点 #

• 移除全局变量createDiv，在divCreate()中使用局部变量，避免意外覆盖
• 调整randomDiv()的循环逻辑：固定循环3次生成3个div，直接通过循环索引+1匹配color_fix指定的位置，确保每次都能准确设置目标颜色的div
• 逻辑更简洁，彻底解决了刷新时目标颜色偶尔不出现的问题

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