cannot read property of type "length" of undefined Javascript

Question

the idea is, when you refresh the page, it picks random colours, and they all get assigned in the 6x6 grid, but I receive an error

Uncaught TypeError: Cannot read property 'length' of undefined
    at pickColor (colorgame.js:30)
    at colorgame.js:3

I'm really new to javascript (1 week actually and I'm not really sure) I have gone around the internet in search of the answer but I can't make sense of it all

var colors = generateRandomColors(6);
var squares = document.querySelectorAll(".square");
var pickedColor = pickColor(colors);
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");

colorDisplay.textContent = pickedColor;

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){
            messageDisplay.textContent = "Correct!";
            changeColors(clickedColor)
        } else{
            this.style.backgroundColor = "#232323"
            messageDisplay.textContent = "Try Again!"
        }
    })
}

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

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

function generateRandomColors(num){
    var arr = []
    for (var i = 0; i < num; i++){
        arr.push(randomColor())
    }
}

function randomColor(){
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

  <h1 id="title">The Great <span id="colorDisplay">RGB</span> Game</h1>

    <div>
        <span id="message"></span>
    </div>
    
    <div id="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>

Go to the line throwing the error. Find out why the code is doing the equivalent of “undefined.length”. Walk back through the code up until that point as necessary. — user2864740
– user2864740, Commented Jun 13, 2020 at 19:18
generateRandomColors returns nothing, it's undefined :) So, let it just do return arr — Icepickle
– Icepickle, Commented Jun 13, 2020 at 19:19
I understand you're new to javascript, but please avoid questions seeking for debug help. I'd suggest you take some courses and learn how to debug your code :) — Alisson Reinaldo Silva
– Alisson Reinaldo Silva, Commented Jun 13, 2020 at 19:23

Tobias W · Accepted Answer · 2020-06-13 19:19:58Z

4

Your function generateRandomColors should return arr. Otherwise its return value will be undefined and hence, does not have a property length.

answered Jun 13, 2020 at 19:19

Tobias W

2602 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

cannot read property of type "length" of undefined Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related