当我点击圆圈时，如何使用 Javascript 使圆圈改变颜色？另外，如果所有圆圈都是红色，我该如何显示文字？一世

Question

 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?我怎么做？

Answer 1

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,对于静态不可变对象，请使用 const：您不需要 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传递参数时，尽量传递函数目的所需的最小数据量：例如identity不需要参数
use querySelector more wisely.更明智地使用querySelector 。 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 ).请阅读使用 JS querySelector 的性能，它很好地了解了 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>

Answer 2


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;
}

当我点击圆圈时，如何使用 Javascript 使圆圈改变颜色？另外，如果所有圆圈都是红色，我该如何显示文字？一世

问题描述

2 个解决方案

解决方案1
0 2020-10-09 21:07:19

解决方案2
0 2020-10-09 21:22:35

当我点击圆圈时，如何使用 Javascript 使圆圈改变颜色？ 另外，如果所有圆圈都是红色，我该如何显示文字？ 一世

问题描述

2 个解决方案

解决方案1 0 2020-10-09 21:07:19

解决方案2 0 2020-10-09 21:22:35

当我点击圆圈时，如何使用 Javascript 使圆圈改变颜色？另外，如果所有圆圈都是红色，我该如何显示文字？一世

解决方案1
0 2020-10-09 21:07:19

解决方案2
0 2020-10-09 21:22:35