let colorChangesTo = {
red: "blue",
blue: "orange",
orange: "green",
green: "red"
}
let message = "All the same color";
let output = document.querySelector("#messageOutput");
function colorChange(event) {
let color = event.target.getAttribute("fill");
event.target.setAttribute("fill", colorChangesTo[color]);
output.innerText = isColorsTheSame() ? message : "";
}
let isColorsTheSame = () => {
let circles = document.querySelectorAll("circle");
let colors = [];
[...circles].forEach(x => {
colors.push(x.getAttribute("fill"))
});
let isTheSame = (currentVal) => currentVal === colors[0];
return colors.every(isTheSame) ? true : false;
}
Solution 1 :
Solution 2 :
Lot of issues in your piece of code.
Some advices on how to code:
- for static immutable objects, use const: you do not need a function for nextColor,
- when passing parameters, try to pass the smallest amount of data needed for the purpose of the function: for example, identity does not need parameters
- use
querySelectormore wisely. Please read Performance using JS querySelector that gives a good idea of the advantages/drawbacks of this function of the Web API (https://developer.mozilla.org/en-US/docs/Web/API).
Please try
const nextColor = {
red : "blue",
blue : "orange",
orange : "green",
green : "red"
}
function identity() {
document.querySelector("#messageOutput").innerHTML =
document.querySelector("#circle1").getAttribute("fill") ===
document.querySelector("#circle2").getAttribute("fill") &&
document.querySelector("#circle1").getAttribute("fill") ===
document.querySelector("#circle3").getAttribute("fill") ?
"You got the same color" : "";
}
function colorChange(event) {
let element = event.target;
element.setAttribute("fill", nextColor[element.getAttribute("fill")]);
identity();
return;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="part5_2.js" defer></script>
<title>Color changing game.</title>
</head>
<body>
<h1>Color Changing Game</h1>
<p>
The goal it to get all circles the same color.
When you click on a circle it changes color. <br/>
Red circles become blue, <br/>
blue circles become orange, <br/>
orange circles become green <br/>
and green circles become red. <br/>
You are to use the same event listener for all the circles.
When the circles are all the same color display the message
"All the same color" below the svg graphic.
</p>
<svg width = "200px" height="200px">
<circle id="circle1" cx="100px" cy="50px" r="10" fill="red" onclick="colorChange(event)" />
<circle id="circle2" cx="50px" cy="150px" r="10" fill="orange" onclick="colorChange(event)"/>
<circle id="circle3" cx="150px" cy="150px" r="10" fill="green" onclick="colorChange(event)" />
</svg>
<p id="messageOutput"></p>
</body>
</html> Problem :
function nextColor(inputID, newColor) {
let input = document.querySelector("#" + inputID)
let color = input.getAttribute("fill")
if (color = "red") {
newColor = "blue";
} else if (color = "orange") {
newColor = "green";
} else if (color = "green") {
newColor = "red";
}
return newColor;
}
function identity(newColor) {
if (newColor = "red") {
document.querySelector("#messageOutput").innerHTML = "You got the same color";
}
}
function colorChange(event) {
let element = event.target;
element.setAttribute("fill", nextColor('circle1', newColor));
identity(newColor);
return;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="part5_2.js" defer></script>
<title>Color changing game.</title>
</head>
<body>
<h1>Color Changing Game</h1>
<p>
The goal it to get all circles the same color. When you click on a circle it changes color. <br> Red circles become blue, <br> blue circles become orange, <br> orange circles become green <br> and green circles become red. <br> You are to use the
same event listener for all the circles. When the circles are all the same color display the message "All the same color" below the svg graphic.
</p>
<svg width="200px" height="200px">
<circle id="circle1" cx="100px" cy="50px" r="10" fill="red" onclick="colorChange(event)" />
<circle id="circle2" cx="50px" cy="150px" r="10" fill="orange" onclick="colorChange(event)"/>
<circle id="circle3" cx="150px" cy="150px" r="10" fill="green" onclick="colorChange(event)" />
</svg>
<p id="messageOutput"></p>
</body>
</html>I need to get the three circles to change color when I click on them. How do I do that? Also, I’m supposed to use two helper functions so I don’t have to make the code extremely long. I also need to make a comment “you got the same color” if all of the circles turn red. How do I do that?