Неужели почему Javascript eventListener не связывается с элементом SVG?

Question

Привет, я работаю над проблемой здесь, я собрал простой круг SVG, и я хочу подключить к нему некоторый JS-код, чтобы изменить цвет от синего до красного при первом щелчке, а затем вернуться к синий на втором щелчке.

Код размещен ниже, и я проверил его с помощью проверки синтаксиса со всем, что, по-видимому, в порядке.

Так что, может быть, логика, которую я использую, - это выход, или что-то незначительное. Надеюсь, кто-то может мне точку в правильном направлении, благодаря

`<svg id="circles" width="66%" height="100vh" viewBox="0 0 700 666"> 
 

 
    <circle id="shape" class="svgCircle" cx="170" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2" /> 
 

 
<script> 
 

 
var shapeClick = document.getElementById("shape").addEventListener("click", changeColor); 
 
var clicks = 0; 
 

 
function changeColor(){ 
 

 
    if (shape.fill == "rgb(29, 172, 249)") 
 
    { 
 
    shape.fill == "rgb(255, 0, 0)"; 
 

 
    } 
 
    else { 
 

 
    shape.fill == "rgb(29, 172, 249)"; 
 
    } 
 

 

 
} 
 

 

 
</script> 
 

 
</svg> 
 

 

 

 

 

 

 
`

Answer 1

Попробуйте это:

var shapeClick = document.getElementById("shape").addEventListener("click", changeColor); 
 
var clicks = 0; 
 

 
function changeColor(){ 
 
    if (shape.style.fill == "rgb(29, 172, 249)") 
 
    { 
 
    shape.style.fill = "rgb(255, 0, 0)"; 
 

 
    } 
 
    else { 
 

 
    shape.style.fill = "rgb(29, 172, 249)"; 
 
    } 
 

 

 
}

<svg id="circles" width="66%" height="100vh" viewBox="0 0 700 666"> 
 

 
    <circle id="shape" class="seat" cx="170" cy="125" r="20" style="fill: #1dacf9" stroke="black" stroke-width="2" /> 
 

 
</svg>