Javascript //未捕获错误：拾取颜色不是函数-我找不到错误

一切都很好，直到我调用函数var picked color=pickColor；我已经在控制台单独运行了函数pickColor-工作正常！！！请帮忙

var colors = [

    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)",
    "rgb(0, 255, 0)",
    "rgb(0, 255, 255)",
    "rgb(0, 0, 255)",
    "rgb(255, 0, 255)"

];

// Variables 

var squares = document.querySelectorAll(".squares");

var pickedColor = pickColor(); 



var colorDisplay = document.getElementById("colorDisplay");

var message = document.getElementById("message");



//Display 

colorDisplay.textContent = pickedColor;

//test

for (var i = 0; i < squares.length; i++) {

    squares[i].style.backgroundColor = colors[i];



    squares[i].addEventListener("click",function(){

        var clickedColor = this.style.backgroundColor;



        if (clickedColor === pickedColor){

            message.textContent = "Right Color";
            changeColors(clickedColor); 


        } else {

            this.style.backgroundColor = "#232323";
            message.textContent = "Try Again";
        }
    });

    function changeColors(color){

        for (i = 0; i < squares.length;  i++){

            squares[i].style.backgroundColor =  color; //
        }
    }

    function pickColor(){

        var random = Math.floor(Math.random() * colors.length );

        return colors[random];
    }


}

Html

彩色游戏JavaScript——在我调用函数var picked Color=pickColor之前，一切都很好；我已经在控制台单独运行了函数pickColor-工作正常！！！请帮忙

var colors = [

    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)",
    "rgb(0, 255, 0)",
    "rgb(0, 255, 255)",
    "rgb(0, 0, 255)",
    "rgb(255, 0, 255)"

];

// Variables 

var squares = document.querySelectorAll(".squares");

var pickedColor = pickColor(); 



var colorDisplay = document.getElementById("colorDisplay");

var message = document.getElementById("message");



//Display 

colorDisplay.textContent = pickedColor;

//test

for (var i = 0; i < squares.length; i++) {

    squares[i].style.backgroundColor = colors[i];



    squares[i].addEventListener("click",function(){

        var clickedColor = this.style.backgroundColor;



        if (clickedColor === pickedColor){

            message.textContent = "Right Color";
            changeColors(clickedColor); 


        } else {

            this.style.backgroundColor = "#232323";
            message.textContent = "Try Again";
        }
    });

    function changeColors(color){

        for (i = 0; i < squares.length;  i++){

            squares[i].style.backgroundColor =  color; //
        }
    }

    function pickColor(){

        var random = Math.floor(Math.random() * colors.length );

        return colors[random];
    }


}

---

这是一个范围问题。您正在for循环中定义函数pickColor，因此它只能在该循环中定义和使用

要解决这个问题，只需将函数的定义移出这个循环，使var pickedColor=pickColor；线路可以利用它

此外，您可能希望对changeColors函数执行相同的操作。大概是这样的：

var colors = [

    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)",
    "rgb(0, 255, 0)",
    "rgb(0, 255, 255)",
    "rgb(0, 0, 255)",
    "rgb(255, 0, 255)"

];

// Variables 

var squares = document.querySelectorAll(".squares");

var pickedColor = pickColor(); 



var colorDisplay = document.getElementById("colorDisplay");

var message = document.getElementById("message");



//Display 

colorDisplay.textContent = pickedColor;

//test

for (var i = 0; i < squares.length; i++) {

    squares[i].style.backgroundColor = colors[i];



    squares[i].addEventListener("click",function(){

        var clickedColor = this.style.backgroundColor;



        if (clickedColor === pickedColor){

            message.textContent = "Right Color";
            changeColors(clickedColor); 


        } else {

            this.style.backgroundColor = "#232323";
            message.textContent = "Try Again";
        }
    });
}

function changeColors(color){

        for (i = 0; i < squares.length;  i++){

            squares[i].style.backgroundColor =  color; //
        }
    }

function pickColor(){

    var random = Math.floor(Math.random() * colors.length );

    return colors[random];
}

在for循环之外定义pickColor和changeColor函数。如果它们是在循环中定义的，则从外部无法访问它们

函数更改颜色{ 对于i=0；i如果单击颜色===pickedColor{ message.textContent=正确的颜色； 改变颜色； }否则{ this.style.backgroundColor=2323； message.textContent=重试； } }; } 身体{ 保证金：0； 填充：0； 背景色：2323； } h1{ 颜色：白色； } 容器{ 宽度：600px； 保证金：0自动； } 信息{ 颜色：白色； } .正方形{ 宽度：180px； 高度：190px； 背景颜色：紫色； 浮动：左； 右边距：10px； 边缘底部：10px； 边界半径：40px； } C 彩色游戏 伟大的色彩游戏！！！ 据我所知，以下问题的原因请看评论

但是，这仍然是可能的：函数changeColor可以像本地函数一样保留在循环中并在本地调用

---

为什么循环中的函数是ChangeColor和pickColor？函数pickColor的定义在哪里。我不明白，我不认为这是真的。JS函数声明被提升，并且这些声明在全局范围内。如果clickedColor===pickedColor{message.textContent=Right Color；changeColorsclickedColor；//在foorloop内部如何…您仍然可以从for循环内部访问pickedColor。全局声明的内容（即循环/函数外部的内容）可以从循环内部访问，但不能从循环内部访问。在循环内部声明的内容必须保留在循环的一方。作用域就是这样工作的。@JS中的AnisR函数声明有函数作用域，而不是块作用域。因此，它们在全局作用域中。结果证明我错了，经过一点研究，似乎函数声明从ES6开始就被正式划分为块作用域，而且以前没有定义。参考：我认为这不是真的。JS函数声明被挂起，这些都在全局范围内。事实证明我错了，经过一点研究，似乎函数声明从ES6开始就被正式划分为块作用域，而以前它是未定义的。参考：直到现在，我确实学到了一些东西：我以为JS只使用过ES6 let和const之外的函数作用域声明。

var colors = [

    "rgb(255, 0, 0)",
    "rgb(255, 255, 0)",
    "rgb(0, 255, 0)",
    "rgb(0, 255, 255)",
    "rgb(0, 0, 255)",
    "rgb(255, 0, 255)"

];

// Variables 

var squares = document.querySelectorAll(".squares");

var pickedColor = pickColor(); 



var colorDisplay = document.getElementById("colorDisplay");

var message = document.getElementById("message");



//Display 

colorDisplay.textContent = pickedColor;

//test

for (var i = 0; i < squares.length; i++) {

    squares[i].style.backgroundColor = colors[i];



    squares[i].addEventListener("click",function(){

        var clickedColor = this.style.backgroundColor;



        if (clickedColor === pickedColor){

            message.textContent = "Right Color";
            changeColors(clickedColor); 


        } else {

            this.style.backgroundColor = "#232323";
            message.textContent = "Try Again";
        }
    });
}

function changeColors(color){

        for (i = 0; i < squares.length;  i++){

            squares[i].style.backgroundColor =  color; //
        }
    }

function pickColor(){

    var random = Math.floor(Math.random() * colors.length );

    return colors[random];
}

var pickedColor = pickColor(); //Global, we're calling here

for (....) {
//codes

function pickColor(){  //Local

    var random = Math.floor(Math.random() * colors.length );

    return colors[random];
}


}

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

var colors = [
      "rgb(255, 0, 0)",
      "rgb(255, 255, 0)",
      "rgb(0, 255, 0)",
      "rgb(0, 255, 255)",
      "rgb(0, 0, 255)",
      "rgb(255, 0, 255)"
    ];
    // Variables 
    var squares = document.querySelectorAll(".squares");
    var pickedColor = pickColor()
    var colorDisplay = document.getElementById("colorDisplay");
    var message = document.getElementById("message");
    //Display 
    colorDisplay.textContent = pickedColor;
    //test
    for (var i = 0; i < squares.length; i++) {
     squares[i].style.backgroundColor = colors[i];
    squares[i].addEventListener("click", function() {
        var clickedColor = this.style.backgroundColor;
        if (clickedColor === pickedColor) {
          message.textContent = "Right Color";
          changeColors(clickedColor);
        } else {
          this.style.backgroundColor = "#232323";
          message.textContent = "Try Again";
        }
      });
function changeColors(color) {
  for (i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = color; //
  }
}
    }