https://jsfiddle.net/37kf31uz/JavaScript函數不再工作或影響的所有顏色
所以,由於某種原因,我把在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 + ")";
}
請包括html部分或任何jsfiddle來檢查它。 –
好吧,我把jsfiddle放在那裏。謝謝 – chrysaron