Javascript 变量在函数内更改其值

我正在尝试做一个RGB颜色猜测游戏。 它在第一次运行时运行良好。第二次使用新建游戏按钮时，应生成新的pickedColor和一组随机颜色。尽管每次都会生成新的pickedColor（在第30行中选中），但pickedColor的值会更改回第42行中以前的值

为什么会这样？如何在第30行和第42行获得相同的pickedColor值

函数getRandomColor（）{ var-arr=[]； var r=0， g=0， b=0； 无功温度； 对于（变量i=0；i<6；i++）{ r=数学地板（数学随机（）*256）； g=数学地板（数学随机（）*256）； b=数学地板（数学随机（）*256）； arr[i]=“rgb”（“+r+”、“+g+”、“+b+”）； } 返回arr； } 函数pickColor（颜色）{ var num=Math.floor（Math.random（）*colors.length）； 返回num； } 函数newGame（）{ var colors=getRandomColor（）； var colorTile=document.querySelectorAll（“.colorTile”）； var pickedColor=颜色[pickColor（颜色）]； console.log（pickedColor）； 控制台日志（颜色）； var rgbDisplay=document.querySelector（“rgbDisplay”）； var h1=document.queryselectoral（“h1”）； rgbDisplay.textContent=pickedColor； 对于（var i=0；i

#容器{
宽度：600px；
高度：400px；
保证金：0px自动；
}
.彩色瓷砖{
背景色：红色；
宽度：30%；
利润率：1.6%；
垫底：30%；
浮动：左；
}
身体{
背景色：黑色；
}
h1{
颜色：黄色；
文本对齐：居中；
}
钮扣{
宽度：20%；
高度：30px；
利润率：30像素；
左缘：40%；
颜色：黑色；
背景颜色：黄色；
}
HTML

彩色游戏
伟大的RGB游戏
单击平铺
新游戏

您正在使用此行绑定对colorTile元素的多次单击

colorTile[i].addEventListener("click", function()

尝试removeEventListener，然后像这样添加新的removeEventListener

function getRandomColor()
{
  var arr = [];
  var r=0, g=0, b=0;
  var temp;

  for(var i=0; i<6; i++)
  {
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);

    arr[i] = "rgb("+r+", "+g+", "+b+")";
  }

  return arr;
}

function pickColor(colors)
{
  var num = Math.floor(Math.random() * colors.length);
  return num;
}

var pickedColor = '';
var colorTile = document.querySelectorAll(".colorTile");
function newGame()
{
  var colors = getRandomColor();
  pickedColor = colors[pickColor(colors)];
  console.log(pickedColor);
  console.log(colors);

  var rgbDisplay = document.querySelector("#rgbDisplay");
  h1 = document.querySelectorAll("h1");

  rgbDisplay.textContent = pickedColor;
  for(var i=0; i<colorTile.length; i++)
  {
    colorTile[i].style.backgroundColor = colors[i];
    colorTile[i].removeEventListener('click', fn)
    colorTile[i].addEventListener("click", fn);

  }

}
function fn (){
      console.log(pickedColor);
      if(pickedColor === this.style.backgroundColor)
      {
        h1[1].textContent = "Correct";

        for(var j=0; j<colorTile.length; j++)
        {
          colorTile[j].style.backgroundColor = this.style.backgroundColor;
        }
      }

      else{
        h1[1].textContent = "Incorrect";
        this.style.backgroundColor = "black";
      }
    }
newGame();

var button = document.querySelectorAll("button");
button[0].addEventListener("click", function(){
  var h1 = document.querySelectorAll("h1");
  h1[1].textContent = "Click On Tile"
  newGame();
});

函数getRandomColor（） { var-arr=[]； var r=0，g=0，b=0； 无功温度；

---

对于（var i=0；i您正在使用此行绑定对colorTile元素的多次单击

colorTile[i].addEventListener("click", function()

尝试removeEventListener，然后像这样添加新的removeEventListener

function getRandomColor()
{
  var arr = [];
  var r=0, g=0, b=0;
  var temp;

  for(var i=0; i<6; i++)
  {
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);

    arr[i] = "rgb("+r+", "+g+", "+b+")";
  }

  return arr;
}

function pickColor(colors)
{
  var num = Math.floor(Math.random() * colors.length);
  return num;
}

var pickedColor = '';
var colorTile = document.querySelectorAll(".colorTile");
function newGame()
{
  var colors = getRandomColor();
  pickedColor = colors[pickColor(colors)];
  console.log(pickedColor);
  console.log(colors);

  var rgbDisplay = document.querySelector("#rgbDisplay");
  h1 = document.querySelectorAll("h1");

  rgbDisplay.textContent = pickedColor;
  for(var i=0; i<colorTile.length; i++)
  {
    colorTile[i].style.backgroundColor = colors[i];
    colorTile[i].removeEventListener('click', fn)
    colorTile[i].addEventListener("click", fn);

  }

}
function fn (){
      console.log(pickedColor);
      if(pickedColor === this.style.backgroundColor)
      {
        h1[1].textContent = "Correct";

        for(var j=0; j<colorTile.length; j++)
        {
          colorTile[j].style.backgroundColor = this.style.backgroundColor;
        }
      }

      else{
        h1[1].textContent = "Incorrect";
        this.style.backgroundColor = "black";
      }
    }
newGame();

var button = document.querySelectorAll("button");
button[0].addEventListener("click", function(){
  var h1 = document.querySelectorAll("h1");
  h1[1].textContent = "Click On Tile"
  newGame();
});

函数getRandomColor（） { var-arr=[]； var r=0，g=0，b=0； 无功温度；

---

对于（var i=0；i我使用了您的代码，并最终得到了一个工作片段，在该片段中我尝试增强了许多功能：

在修改过程中，我试图在代码中添加注释。
有了它，你可以玩你想要的彩色瓷砖的数量，而且它工作得很好

//在同一位置定义全局变量
var rgbDisplay=document.querySelector（“rgbDisplay”）；
var h1=document.queryselectoral（“h1”）；
var container=document.querySelector（“容器”）；
var tilesNumber=6；//选择要从多少块开始！
var-pickedColor；
var按钮=document.querySelector（“按钮”）；
//在名称中的颜色中添加了s
//删除了“temp”变量和r g b初始值
函数GetRandomColor（nb）{
var-arr=[]；
var r，g，b；
对于（变量i=0；i

正文{
背景色：黑色；
}
#容器{
宽度：600px；
保证金：0px自动；
}
.彩色瓷砖{
/*修改*/
背景色：红色；
利润率：1.6%；
填充：0.30%30%；
浮动：左；
}
h1{
颜色：黄色；
文本对齐：居中；
}
钮扣{
宽度：20%；
高度：30px；
利润率：30像素；
左缘：40%；
颜色：bla