谁能认出我在哪里；我的SVG/Javascript功能出了问题？

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

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

当我将代码放入JSFIDLE时，其中一个圆圈起作用，另一个不起作用，即使代码是相同的，它们在控制台中都给出相同的错误

[错误]引用错误：找不到变量：changeColor1 onclick（_显示：79）

var shapeClick=document.getElementById（“circle0”）.addEventListener（“单击”，更改颜色）；
var=0；
var colortogle=true；
函数changeColor（）{
var color=COLORTOGLE？#ff0000:“#1dacf9”；
circle0.setAttribute（'fill'，color）；
colorToggle=！colorToggle；
}
var shapeClick=document.getElementById（“circle1”）.addEventListener（“单击”，changeColor1）；
var=0；
var colortogle=true；
函数changeColor1（）{
var color=COLORTOGLE？#ff0000:“#1dacf9”；
圆圈1.setAttribute（'填充'，颜色）；
colorToggle=！colorToggle；
}

---

您缺少打开svg标记的信息

---

在您的例子中，您正在重新定义已经存在的变量，并且两个圆都引用了相同的值进行切换

var shapeClick = ...

...

var shapeClick = ...

此外，您不需要执行

onclick=“function（）”

和

addEventListener

；他们做同样的事情

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

创建一个对象以保持切换状态。键应该是圆圈的ID，值应该是

true

或

false

，以表示每个圆圈的状态

生成一个处理函数，并使用

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

---

不，他不是，那只是一个省略了一个空行的人工制品，所以虽然代码在那里，但它没有显示出来。我添加了一个空行，现在问题显示了开始标签。请不要污损你的帖子。但是，如果您认为它们不再相关，您可以删除它们。为什么要在js中添加事件内联和？直到第二次单击，颜色才改变，这可能是因为

colortheggle

在两个函数/圈之间共享。非常感谢您，现在这段代码更有意义了。所以理论上我可以添加任意多的圆，它们都会通过这个函数运行？是的！每个圆都有一个单独的函数的好处是，您知道在每个圆中单击了哪一个。然而，这种方法对于大量的圆是不可行的，对于动态的圆也是不可能的。取而代之的是，这个函数可以通过ID属性知道单击了哪个圆。好的，这很有意义，谢谢。当我将代码放入页面并将ID的名称从圆圈更改为其他名称，然后更新“querySelectorAll（'circle'）以匹配时，我遇到了一些问题，它停止工作。还想知道是否可以使用状态[id]来更新数据库中的用户值，例如，如果its=red然后-1如果它返回蓝色然后+1？

文档中的'circle'

。querySelectorAll（'circle'）意味着选择所有

元素。它不应该引用一个特定圆圈的ID。在HTML代码段中，圆圈的ID为

circle0

和

circle1

，但这两个圆圈都由查询匹配，因为它们都是

元素。在

state

对象中可以存储的不仅仅是

true

和

false

，但请注意，您必须更改

color=state[id]？'#FF0000'：“#1DACF9”

类似于

color=state[id]==1？”#FF0000'：'#1DACF9'

和

状态[id]=！state[id]

到

state[id]=-state[id]

非常感谢，现在有意义了。是否需要存储多个状态才能影响mySQL数据库中用户行的值？我对其工作原理的设想是，用户将在数据库中的用户ID下存储一个值，比如说20，并且在他们的个人资料页面上，如果他们单击其中一个圆圈并将颜色变为红色，那么该值将减少到19？我对PHP和JS太陌生了，不知道这是否可行。

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