# Kreise verschwinden lassen



## programmierer123 (7. Dez 2017)

Hallo,
warum erscheint der gelbe und grüne Kreis gleich beim laden der Seite nicht? Sondern erst, wenn man auf den Reset Button klickt?

Und warum verschwindet der gelbe und grüne Kreis nicht, wenn man darauf klickt?
Das habe ich doch so programmiert.



Spoiler: Kreis verschwinden lassen





```
document.getElementById("kreis_gelb").onclick=document.getElementById("kreis_gelb").style.display="none";
        document.getElementById("kreis_gruen").onclick=document.getElementById("kreis_gruen").style.display="none";
```






Spoiler: Code





```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ampel</title>
<style>
#kreis_rot, #kreis_gelb, #kreis_gruen, #button{
    float:left;
    margin-right:50px;
}
</style>
</head>
<body>
    <div id="kreis_rot"> </div>
        <div id="kreis_gelb"> </div>
        <div id="kreis_gruen"> </div>
        <div><button id="reset">Reset</button>
    </div>
   
    <script>
        function createCircle(id, color,radius){
            document.getElementById(id).style.display="block";
            document.getElementById(id).style.width=2*radius+"px";
            document.getElementById(id).style.height=2*radius+"px";
            document.getElementById(id).style.borderRadius="50%";
            document.getElementById(id).style.backgroundColor=color;
        }

        createCircle("kreis_rot","red",100);
        createCircle("kreis_gelb", "yellow",100);
        createCircle("kreis_gruen", "green",100);

        document.getElementById("reset").onclick=function(){
            createCircle("kreis_rot","red",100);
            createCircle("kreis_gelb", "yellow",100);
            createCircle("kreis_gruen", "green",100);
        }

        document.getElementById("kreis_rot").onclick=function(){
            document.getElementById("kreis_rot").style.display="none";
        }

        document.getElementById("kreis_gelb").onclick=document.getElementById("kreis_gelb").style.display="none";
        document.getElementById("kreis_gruen").onclick=document.getElementById("kreis_gruen").style.display="none";
    </script>
</body>
</html>
```


----------



## krgewb (7. Dez 2017)

Bei dem roten steht es ein bisschen anders:

```
document.getElementById("kreis_rot").onclick=function(){
     document.getElementById("kreis_rot").style.display="none";
}
```

Wenn du die beiden Zeilen

```
document.getElementById("kreis_gelb").onclick=document.getElementById("kreis_gelb").style.display="none";
document.getElementById("kreis_gruen").onclick=document.getElementById("kreis_gruen").style.display="none";
```
entfernst werden beim Aufruf der Seite alle drei Kreise angezeigt.


----------



## programmierer123 (7. Dez 2017)

Ok, aber ich verstehe nicht, warum diese nicht angezeigt werden. Immerhin sag ich doch, dass nur bei einem KLICK(onclick) auf den Kreis, der Kreis verschwinden soll.


----------



## mrBrown (7. Dez 2017)

Das hinter dem Gleichzeichen ist keine Funktion, die du übergibst, sondern wird erst ganz normal ausgewertet, und der Rückgabewert wird dann übergeben.


----------



## programmierer123 (7. Dez 2017)

Das verstehe ich nicht. Warum muss hinter dem Gleichheitszeichen eine Funktion kommen?

Außerdem, sage ich doch, dass nur bei einem Klick auf den Kreis, etwas passieren soll? Oder meinst du, dass diese beiden Codes dasselbe sind?

document.getElementById("kreis_gelb").onclick=document.getElementById("kreis_gelb").style.display="none";

ist dasselbe wie?

document.getElementById("kreis_gelb").onclick;
document.getElementById("kreis_gelb").style.display="none";


----------



## mrBrown (7. Dez 2017)

Nein, es wäre das selbe, wenn du die Rückgabe von deiner zweiten Zeile der ersten zuweist.

Es soll doch eine Funktion bei onClick ausgeführt werden, dann solltest du auch eine Funktion zuweisen


----------



## programmierer123 (7. Dez 2017)

Warum brauche ich nach dem = Zeichen ein function(){...} und kann nicht direkt den auszuführenden Code nach dem = Zeichen schreiben?


----------



## mrBrown (8. Dez 2017)

Weil es, wenn du einfach so einen Ausdruck hinschriebst, eben ausgewertet wird.


----------



## programmierer123 (8. Dez 2017)

Kann ich mir das so merken, dass wenn Code für ein bestimmtes Ereignis ausgeführt werden soll, dass ich dazu dieses function(){...} brauche?


----------



## programmierer123 (8. Dez 2017)

Bitte um Antwort. Das wäre wichtig fürs Verständnis.


----------



## mrBrown (8. Dez 2017)

Jein.
Du musst eine Funktion übergeben, dafür kann function(){} nötig sein, ist’s aber nicht immer.


----------



## glass (9. Dez 2017)

es tut mir leid, wenn das mit der frage nichts zu tun hat , aber wie kann man in diesem Forum einen Beitrag erstellen????


----------



## mrBrown (9. Dez 2017)

Ein passenden Bereich wählen, und diesen riesigen, roten, nicht zu übersehenden Button drücken


----------



## krgewb (9. Dez 2017)

Rot? Also bei mir gibt es einen blauen Button mit dem Text "Neues Thema erstellen".


----------



## mrBrown (9. Dez 2017)

krgewb hat gesagt.:


> Rot? Also bei mir gibt es einen blauen Button mit dem Text "Neues Thema erstellen".



Ja okay, es ist kein reines Rot, aber sicher mehr Rot als Blau


----------



## krgewb (9. Dez 2017)

Sehr merkwürdig. Bei mir sieht es wie folgt aus:


----------



## mrBrown (9. Dez 2017)

Lustig 



mrBrown hat gesagt.:


> Ein passenden Bereich wählen, und diesen riesigen, roten, nicht zu übersehenden Button drücken


Dann wohl eher: "Ein passenden Bereich wählen, und diesen Button drücken"


----------



## programmierer123 (10. Dez 2017)

Häh? Bei mir ist der Button grün


----------

