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.
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.
Code:
document.getElementById("kreis_gelb").onclick=document.getElementById("kreis_gelb").style.display="none";
document.getElementById("kreis_gruen").onclick=document.getElementById("kreis_gruen").style.display="none";
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>
