Kann mir jemand mit dieser SVG/Javascript-Funktion auffallen, wo ich falsch liege?

Question

Ich habe einige SVG-Kreise zusammengestellt, wobei die Farbe der Kreise bei jedem Klick zwischen Blau und Rot wechseln soll.

Ich bekomme ein inkonsistentes Verhalten von diesem, als wenn ich auf die Kreise in meiner Localhost-Umgebung klicke, es funktioniert, aber die Farbe ändert sich nicht zu Rot bis zum zweiten Klick.

Wenn ich den Code in jsFiddle setzen, einen der Kreise funktioniert, man nicht, obwohl der Code gleich ist, und sie beide den gleichen Fehler in der Konsole geben

[Error] ReferenceError: Can't find variable: changeColor1 onclick (_display:79)

 var shapeClick = \t \t \t \t 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>

ich bin sicher, dass es eine Stromlinie Weg, dies zu tun, vor allem, wenn ich es vergrößern und 100 Kreisen hinzufügen, ich kann nicht einen Weg finden, es zu tun, ohne eine große Menge an Code .

Answer 1

In Ihrem Fall zu öffnen, werden Sie Variablen neu zu definieren, die bereits existieren, und beide Kreise verweisen den gleichen Wert für ihre Schalter.

var shapeClick = ... 

... 

var shapeClick = ... 

Auch brauchen Sie nicht zu tun onclick="function()"undaddEventListener; sie machen das Gleiche.

Soweit Straffung, gibt es ein paar Dinge, die Sie tun sollten:

1. Erstellen Sie ein Objekt Staaten halten schalten. Schlüssel sollten IDs der Kreise sein, und die Werte werden true oder false sein, um den Zustand jedes Kreises zu bezeichnen.
2. Machen Sie eine Handler-Funktion und verwenden Sie event.target.getAttribute('id'), um zu identifizieren, welcher Kreis angeklickt wurde.

Sollte up schauen, um etwas am Ende wie folgt:

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

Sie vermissen Sie svg Tag

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>