JavaScript函数不再工作或影响的所有颜色

Question

https://jsfiddle.net/37kf31uz/

所以，由于某种原因，我把在generateRandomNumbers的numSquares后功能页面将不会在初始启动有随机颜色。我所有的颜色都是紫色的。我以前有生成RandomColors（6）;代替。但我正在跟着一个指南，我一直在试图弄清楚为什么我的工作不正常，并启动时显示不同的颜色。

var colors = generateRandomColors(numSquares); 
var squares = document.querySelectorAll(".square"); 
var pickedColor = pickColor(); 
var colorDisplay = document.querySelector("#colorDisplay"); 
var messageDisplay = document.querySelector("#message"); 
var h1 = document.querySelector("h1"); 
var resetButton = document.querySelector("#reset"); 
var easyBtn = document.querySelector("#easyBtn"); 
var hardBtn = document.querySelector("#hardBtn"); 
var numSquares = 6; 

easyBtn.addEventListener("click", function() { 
    hardBtn.classList.remove("selected"); 
    easyBtn.classList.add("selected"); 
    numSquares = 3; 
    colors = generateRandomColors(numSquares); 
    pickedColor = pickColor(); 
    colorDisplay.textContent = pickedColor; 
    for (var i = 0; i < squares.length; i++) { 
     if (colors[i]) { 
      squares[i].style.backgroundColor = colors[i]; 
     } else { 
      squares[i].style.display = "none"; 
     } 
    } 
}); 
hardBtn.addEventListener("click", function() { 
    hardBtn.classList.add("selected"); 
    easyBtn.classList.remove("selected"); 
    numSquares = 6; 
    colors = generateRandomColors(numSquares); 
    pickedColor = pickColor(); 
    colorDisplay.textContent = pickedColor; 
    for (var i = 0; i < squares.length; i++) { 
     squares[i].style.backgroundColor = colors[i]; 
     squares[i].style.display = "block"; 
    } 
}); 


resetButton.addEventListener("click", function() { 
    colors = generateRandomColors(numSquares); 
    pickedColor = pickColor(); 
    colorDisplay.textContent = pickedColor; 
    this.textContent = "New Colors"; 
    messageDisplay.textContent = ""; 
    for (var i = 0; i < squares.length; i++) { 
     squares[i].style.backgroundColor = colors[i]; 
    } 
    h1.style.backgroundColor = "steelblue"; 
}); 

colorDisplay.textContent = pickedColor; 

for (var i = 0; i < squares.length; i++) { 
    //add initial colors to squares 
    squares[i].style.backgroundColor = colors[i]; 

    //add click listeners to squares 
    squares[i].addEventListener("click", function() { 
     //grab color of clicked squares 
     var clickedColor = this.style.backgroundColor; 
     //compare color to pickedColor 
     if (clickedColor === pickedColor) { 
      messageDisplay.textContent = "Correct." 
      resetButton.textContent = "Play Again?"; 
      changeColors(clickedColor); 
      h1.style.background = clickedColor; 
     } else { 
      this.style.background = "#232323"; 
      messageDisplay.textContent = "Try Again." 
     } 
    }); 
} 

function changeColors(color) { 
    for (var i = 0; i < squares.length; i++) { 
     squares[i].style.background = color; 
    } 
} 

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

function generateRandomColors(num) { 
    //make an array 
    var arr = [] 
    //add num random colors to array 
    for (var i = 0; i < num; i++) { 
     //get random color and push into array 
     arr.push(randomColor()) 
    } 
    //return that array 
    return arr; 
} 

function randomColor() { 
    //pick a "red" form 0-255 
    var r = Math.floor(Math.random() * 256) 
    //pick a "green" form 0-255 
    var g = Math.floor(Math.random() * 256) 
    //pick a "blue" form 0-255 
    var b = Math.floor(Math.random() * 256) 
    "rgb(r, g, b)" 
    return "rgb(" + r + ", " + g + ", " + b + ")"; 
} 

Answer 1

的解决方案是将线var numSquares = 6;移动到代码的顶部，因为var colors = generateRandomColors(numSquares);取决于numSquares变量。

这是一个工作pen。

Answer 2

这似乎是Javascript hoisting

在简短的情况下，JS引擎看到代码

var colors; 
var squares; 
var pickedColro; 
var colorDisplay; 
var numSquares; 
var h1; 
var easyBtn; 
var hardBtn; 
colors = generateRandomColors(numSquares); //numSquares in undefined here 
squares = document.querySelectorAll(".square"); 
pickedColor = pickColor(); 
colorDisplay = document.querySelector("#colorDisplay"); 
messageDisplay = document.querySelector("#message"); 
h1 = document.querySelector("h1"); 
resetButton = document.querySelector("#reset"); 
easyBtn = document.querySelector("#easyBtn"); 
hardBtn = document.querySelector("#hardBtn"); 
numSquares = 6; 

所以，你实际上传递未定义的generateRandomColors。 将var numSquare=6移动到顶部，您应该看到您想要的彩色瓷砖。