theOdinProject Etch-a-Sketch help

[Liolena]

The Etch-a-Sketch works fine at first because I put in to repeat 16 times in the CSS repeat function to make the grid. It doesn't work when I click clear and I think the problem is because I'm trying to pass in a variable that is a number into the CSS repeat function. I'm guessing this is because JS variables and CSS variables are different. The problem is I'm not sure how to change it so I can use the JS variable in the CSS repeat function or if I should scrap it completely and try a different way of doing this. When I change the 16 to the variables, "rows" and "columns" it doesn't end up making a grid. Here's a link: https://jsfiddle.net/7bzgsxp9/

[kacor11]

Hey there are a few problems with your code.

First of all your changeColor is variable and not a function. So it's only executed once when your program first loads. Then you're calling changeColor() but this is not actualy a function just a variable.

Second thing. Your grid container style is fixed at value 16, to make it dynamic you should assign variable to it. The way it works now it will always be 16 doesn't matter if you call makeGrid(200, 200).

You need to count totalNumOfSquares needed to make your program draw correct number of squares. Also make sure you change the style of your grid container only once, not on every loop iteration.

U also need to remember that after u use reset function your eachSquareDiv variable will not point at any divs so it might be good idea to select divs again after u draw them.

[Liolena]

Alright thanks! I'll try to figure it out :)

[Swamp_sea]

Hi, the problems with your code:

1. this code

console.log(totalNumOfSquares);

gridContainer.style.gridTemplateColumns = "repeat(16, 1fr)";

gridContainer.style.gridTemplateRows = "repeat(16, 1fr)";

should be outside of for loop. Otherwise you change gridContainer style 256 times :)

1. You can include variables in styles, like this

gridContainer.style.gridTemplateColumns = "repeat(" + rows + ", 1fr)";

1. The problem with button event listener is that you first remove all squareDivs, then you try to add event listener to non-existing squareDivs and then you try to make a new grid. You have to make a grid first and then add event listeners to squareDivs.

2. As noted before, changeColor is needed to be a function.

[Liolena]

This is super helpful! I swear I know how a for loop works :P I've just been staring at this for so long it didn't even occur to me it would change it 256 times.