谁能发现我在这个SVG / Javascript函数中出错的地方？

Question

我把一些SVG圆圈放在一起，圆圈的颜色应该在每次点击时在蓝色和红色之间交替。

我从中得到了一些不一致的行为，因为当我单击本地主机环境中的圆圈时，它可以工作，但颜色直到第二次单击才变为红色。

当我将代码放入jsFiddle时，其中一个圆圈有效，一个不起作用，即使代码相同，并且它们在控制台中都给出了相同的错误

[错误] 引用错误： 找不到变量： 更改颜色1 点击 （_display：79）

     var shapeClick = 				document.getElementById("circle0").addEventListener("click", changeColor);
        var clicks = 0;
        var colorToggle = true;
        function changeColor() {
          var color = colorToggle ? "#ff0000" : "#1dacf9";
          circle0.setAttribute('fill', color);
          colorToggle = !colorToggle;
        }
        var shapeClick = document.getElementById("circle1").addEventListener("click", changeColor1);
        var clicks = 0;
        var colorToggle = true;
        function changeColor1() {
          var color = colorToggle ? "#ff0000" : "#1dacf9";
          circle1.setAttribute('fill', color);
          colorToggle = !colorToggle;
        }

<svg id="table1" width="66%" height="100vh" viewBox="0 0 700 666">
    <circle id="circle0" class="circles" cx="170" cy="125" r="20"     fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/>
    
          <circle id="circle1" class="circles" cx="250" cy="45" r="20"      fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor1()"/>
      
      </svg>

我相信有一种更简化的方法可以做到这一点，特别是如果我放大它并添加 100 个圆圈，我想不出一种方法可以在不使用大量代码的情况下做到这一点。

Answer 1

在您的情况下，您正在重新定义已经存在的变量，并且两个圆圈都为其切换引用相同的值。

var shapeClick = ...
...
var shapeClick = ...

此外，你不需要做onclick="function()"和addEventListener;他们做同样的事情。

就精简而言，您应该做几件事：

1. 创建一个对象以保持切换状态。键应该是圆圈的 ID，值将被true或false以表示每个圆圈的状态。
2. 创建一个处理程序函数，并使用event.target.getAttribute('id')来识别单击了哪个圆圈。

最终应该看起来像这样：

var state = {};
var circleClickHandler = function (event) {
    var id = event.target.getAttribute('id');
    var color = state[id] ? "#ff0000" : "#1dacf9";
    event.target.setAttribute('fill', color);
    state[id] = !state[id];
};
// loop over each circle on the DOM
document.querySelectorAll('circle').forEach(function (element) {
    element.addEventListener('click', circleClickHandler);
});

Answer 2

你缺少打开 svg 标签

https://jsfiddle.net/9oagrcfu/

<svg>
<circle id="circle0" class="circles" cx="170" cy="125" r="20"     fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/>

      <circle id="circle1" class="circles" cx="250" cy="45" r="20"      fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor1()"/>
  </svg>