How to repeat onclick event?

StackOverflow https://stackoverflow.com/questions/20567195

  •  01-09-2022
  •  | 
  •  

Domanda

In the following code, why doesn't it change the color of the ball back to red if I click on it again?

<!DOCTYPE html>
<html>
<body>

<script>
function farbe1(){
    var stern_style = document.getElementById('kugel1').style;
    var click;

   if(click != 0){
    stern_style.setProperty('fill','#F57200');
    click = 0;
    }
    else if(click == 0){
    stern_style.setProperty('fill','red');
    click = 1;
   }}

</script>

<svg height="2000" width="2000">

<circle id="kugel1" cx="1050" cy="500" r="50" style="fill:red;" onclick="farbe1()" />

</svg>

</body>
</html>

I am (as you can probably see) a beginner and would appreciate some help.

È stato utile?

Soluzione

because your flag get reset when you recall, move it out of function:

var click=0;
function farbe1(){

   var stern_style = document.getElementById('kugel1').style;    

   if(click != 0){
      stern_style.setProperty('fill','#F57200');
      click = 0;
    }
    else if(click == 0){
      stern_style.setProperty('fill','red');
      click = 1;
    }
}

Altri suggerimenti

Define var click; outside the function

var click;

function farbe1(){
var stern_style = document.getElementById('kugel1').style;

if(click != 0){
stern_style.setProperty('fill','#F57200');
click = 0;
}
else if(click == 0){
stern_style.setProperty('fill','red');
click = 1;
}}

That's because you declare click inside your farbe1() function. So it is set to undefined at every new call, and click == 0 can never be reached.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top