JavaScript 101 Help

Liquidator

I'm working on a final proejct for an intro CompSci course at my school and I'm tasked with making a simple number guessing game. The game generates three "secret" distinct integers between 0 and 9. You then enter three guesses into text boxes and the game generates hints: GREEN, RED, and YELLOW, based on accuracy. These hints are then displayed in a text area. I've got all of that working just fine -- the game is complete and working. I'm just trying to put in some extra polish. I want the hint text color to match how I have it in this post.


This is what I'm doing to generate the hints.

// Generates the hint for the second number/position.

		if (guessTwo == numTwo) {
			hintTwo = "GREEN";
		}
		else if (guessTwo == numOne || guessTwo == numThree) {
			hintTwo = "YELLOW";
		}
		else {
			hintTwo = "RED";
		}

		// Generates the hint for the third number/position.

		if (guessThree == numThree) {
			hintThree = "GREEN";
		}
		else if (guessThree == numOne || guessThree == numTwo) {
			hintThree = "YELLOW";
		}
		else {
			hintThree = "RED";
		}

This is what I'm doing to print the hints in the text area.

// Displays the current hint in the output text area.

		document.getElementById('instructions').value = document.getElementById('instructions').value + "\n" + guesses + ": " + guessOne + " " + guessTwo + " " + guessThree + " ===> " + hintOne + " " + hintTwo + " " + hintThree;

Is it possible to modify that statement to make the variables hintOne, hintTwo and hintThree text display in the appropriate color based on what is stored in the variables (e.g. RED, YELLOW, GREEN)? I'm just not sure how I would go about doing that. Anyone have any advice?

SporkAndrew

I'm not sure you can have different colours per textarea as you're planning to do there.

I think the only feasible way would be having an empty div with the id of instructions as per your textarea, and then filling the innerHTML with spans with style applied

document.getElementById('instructions').innerHTML = '<span style="color: ' + hintOne + ';">' + guessOne + '</span> <span style="color: ' + hintTwo + ';">' + guessTwo + '</span> <span style="color: ' + hintThree + ';">' + guessThree + '</span>';

You might get away with using the colour names in the style, but you might want to consider replacing the words GREEN / YELLOW / RED with the hex values.