Setting color from values in HSLA array (Etch-a-sketch)


#1

I am working on the etch-a-sketch project and I want to be able to easily store and recall color information from any grid square. I set up arrays for H, S, L, and A values for each square. I am trying to get the following code to work (arrays were already created off-screen and I have verified that their values are being updated as intended).

h = 200;
s = 100;
l = 50;
a = 0.8;

// Takes HSLA input and resests all squares to that color
function resetGrid(h, s, l, a) {
	const gridSquares = document.querySelectorAll('.grid-square');
	for (let i = 0; i < gridSquares.length; i++) {
		hArray[i] = h;
		sArray[i] = s;
		lArray[i] = l;
		aArray[i] = a;
		gridSquares[i].style.backgroundColor = writeColor(i);
	}
	console.log('Grid reset');
}

// Writes CSS string for HSLA values of given array index
function writeColor(i) {
	colorString = 'hsla(' + hArray[i] + ', ' + sArray[i] + '%, ' + lArray[i] + '%, ' + aArray[i] + ');';
	return colorString
}

I think this code should be setting the background color of each square to the HSLA values declared in the javascript. However when I try to run it no color is applied. What am I doing wrong here?


#2

The problem is the semicolon inside the quotes at the end, try like that:
colorString = ‘hsla(’ + hArray[i] + ', ’ + sArray[i] + '%, ’ + lArray[i] + '%, ’ + aArray[i] + ‘)’;