setInterval global

[Parayia]

Halli Hallo ich hab ein Problem mit meinen Intervallen.
Und zwar code ich ein Auto mit javascript und hab bisher für jede fahrtrichtung einen eigenen Intervall das soll sich ändern sodass ich nur noch einen interval haben der das ganze steuert. die jeweiligen funktionen die in den setInterval angegeben werden steuern die jeweilige richtung.

var x = 50;    //variable für die x-achse
var y = 50;    //variable für die y-achse
var t = 8;    //variable für die Zeit 
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs

function go(anweisung) 
{
            if(anweisung == "rechts")
            {
                 move = setInterval("rechts()",40);
             } 
            if(anweisung == "links")
            {
                 move = window.setInterval("links()", 40);
             } 
            if(anweisung == "runter") 
            {
                move =  window.setInterval("runter()", 40);
            } 
            if(anweisung == "rauf") 
            {
                 move =  window.setInterval("rauf()", 40);
            } 
            if(anweisung =="right")
            {
                move = window.setInterval("right()", 40);
            }
            if(anweisung=="turbo")
            {
                t = t + 10;
            }
            if(anweisung == "slow")
            {
                t =  t - 5;
            }
            else if(anweisung == "stop")
            { window.clearInterval (move);}
}

[ApoY2k]

Und was genau ist jetzt dein Problem? Und wehe du sagst "Funktioniert nicht"...

[Parayia]

es funktioniert ja soweit wie ichs geschrieben hab das ist ja nicht das problem ^^ sondern das problem ist das jedes mal ein neuer interval gestartet wird, und ich einen einzigen interval haben möchte für alle richtungen.
zumindest laut meinem lieben arbeit geber.
Ich clear ja den interval jedes mal bevor ich die richtung änder .. aber ich will halt nur EINEN interval für ALLE richtungen haben und nicht für jede richtung einen interval

werd einfach mal den restlichen code dazu posten. vllt versteht mans dann besser.

function rauf(){
        if (y > 50)
        {
          y = y -  t;
          b = "url(images/rauf.png)";
          document.getElementById("auto").style.top  = (y  + "px");
          document.getElementById("auto").style.backgroundImage= b;
          }     }
function runter(){
    if (y < 450 )
            {
              y = y +  t;
              b = "url(images/runter.png)";
              document.getElementById("auto").style.top  = (y  + "px");
              document.getElementById("auto").style.backgroundImage= b;    
             }}
function links(){    
    if (x > 20)
            {
                x = x -  t;
                b = "url(images/links.png)";
                document.getElementById("auto").style.left  = (x  + "px");
                document.getElementById("auto").style.backgroundImage = b;
            }}
function rechts(){
            if (x < 1400)
            {
                  x = x +  t;
                  b = "url(images/vor.png)";    // setzt den hintergrund des bereichs für das auto fest
                  document.getElementById("auto").style.left  = (x  +   "px");
                  document.getElementById("auto").style.backgroundImage = b;
            }}
function right(){
                  x = x +  t;
                  b = "url(images/rechts.png)";
                  document.getElementById("auto").style.left  = (x  +   "px");
                  document.getElementById("auto").style.backgroundImage = b;
            }
            
function buttonrechts() // die funktion fragt ab wie das auto gerade steht und je nachdem wie es steht wird die richtung verändert beim drücken des buttons
{
    if(b=='url(images/rechts.png)'){go('rechts');}
    if(b=='url(images/vor.png)'){window.clearInterval(move); go('runter');}
    if(b=='url(images/runter.png)'){window.clearInterval(move);go('links');}
    if(b=='url(images/links.png)'){window.clearInterval(move);go('rauf');}
    if(b=='url(images/rauf.png)'){window.clearInterval(move);go('rechts');}
}            
function buttonlinks()
{
    if(b=='url(images/vor.png)'){window.clearInterval(move);go('links');}
    if(b=='url(images/links.png)'){window.clearInterval(move);go('runter');}
    if(b=='url(images/runter.png)'){window.clearInterval(move);go('right');}
    if(b=='url(images/rechts.png)'){window.clearInterval(move);go('rauf');} 
    if(b=='url(images/rauf.png)'){window.clearInterval(move);go('links');} 
}

[boeserfrosch]

Dann übergib doch in deinem Intervall der auf zu rufenden Funktion einen parameter in welche Richtung es gehen soll und in der Funktion machst du dann ne Fallunterscheidung.

also sowas wie:

go(anweisung)  {
if(anweisung == "rechts" || 
anweisung == "links" || anweisung == "runter" || anweisung == "rauf" || anweisung == "right")
{
 move = window.setInterval("moveto('"+anweisung+")", 40);            
}             
}

moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20)             
{                 
x = x -  t;                 
b = "url(images/links.png)";                 
document.getElementById("auto").style.left  = (x  + "px");                 
document.getElementById("auto").style.backgroundImage = b;             
}
break;
case "rechts":
if (x < 1400)            
{                   
x = x +  t;                   
b = "url(images/vor.png)";    // setzt den hintergrund des bereichs für das auto fest                   
document.getElementById("auto").style.left  = (x  +   "px");                   
document.getElementById("auto").style.backgroundImage = b;             
}
break;
case "rauf":
if (y > 50)         
{           
y = y -  t;          
b = "url(images/rauf.png)";           
document.getElementById("auto").style.top  = (y  + "px");           
document.getElementById("auto").style.backgroundImage= b;           
}     
break;
case "runter":
if (y < 450 )             
{               
y = y +  t;               
b = "url(images/runter.png)";               
document.getElementById("auto").style.top  = (y  + "px");               
document.getElementById("auto").style.backgroundImage= b;                  
}
break;
case "right":
x = x +  t;                   
b = "url(images/rechts.png)";                   
document.getElementById("auto").style.left  = (x  +   "px");                   
document.getElementById("auto").style.backgroundImage = b;
break;
 

}
}

[Parayia]

hab das ganze jetzt mal eingebaut ... aber immer wenn ich jetzt bei onclick = go('rechts') mache ... gibt er mir 50000000000000000000 jahre lang den fehler aus das rechts not defined ist

soweit der code des JS

var x = 50;    //variable für die x-achse
var y = 50;    //variable für die y-achse
var t = 8;    //variable für die Zeit 
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
function go(anweisung)  {
if(anweisung == "rechts" || 
anweisung == "links" || 
anweisung == "runter" ||
anweisung == "rauf" ||
anweisung == "right"){

 move = window.setInterval("moveto("+anweisung+")", 40);            
}       }
      
function moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20)             {  
     x = x -  t;
     b = "url(images/links.png)"; 
     document.getElementById("auto").style.left  = (x  + "px"); 
     document.getElementById("auto").style.backgroundImage = b;           
      }
break;
case "rechts":
if (x < 1400) 
{                   
x = x +  t; 
b = "url(images/vor.png)"; 
document.getElementById("auto").style.left  = (x  +   "px"); 
document.getElementById("auto").style.backgroundImage = b;             }
break;
case "rauf":
if (y > 50)         {
     y = y -  t;
     b = "url(images/rauf.png)";
     document.getElementById("auto").style.top  = (y  + "px");
     document.getElementById("auto").style.backgroundImage= b;           }     
break;
case "runter":
if (y < 450 )             {
    y = y +  t; 
    b = "url(images/runter.png)";
    document.getElementById("auto").style.top  = (y  + "px");
    document.getElementById("auto").style.backgroundImage= b;                  }
break;

}
}
function buttonrechts() // die funktion fragt ab wie das auto gerade steht und je nachdem wie es steht wird die richtung verändert beim drücken des buttons
{
    if(b=='url(images/rechts.png)'){go('rechts');}
    if(b=='url(images/vor.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('links');}
    if(b=='url(images/links.png)'){go('rauf');}
    if(b=='url(images/rauf.png)'){go('rechts');}
}            
function buttonlinks()
{
    if(b=='url(images/vor.png)'){go('links');}
    if(b=='url(images/links.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('right');}
    if(b=='url(images/rechts.png)'){go('rauf');} 
    if(b=='url(images/rauf.png)'){go('links');} 
}

Dazu dann passend der code des HTML docs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ferngesteuertes Auto</title>
<script src="starts.js" type="text/javascript"></script>
<link rel="stylesheet" href="cardesign.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div id="steuer">
<input type="button" name="Right" value="Right"     onclick=    "buttonrechts()"> <!--bei click auf den Button rechts wird die funktion buttonrechts() ausgeführt.das auto fährt nach rechts-->
<input type="button" name="Left"  value="Left"      onclick=    "go('links')" > <!--bei click auf den Button links wird die funktion buttonlinks() ausgeführt. das auto fährt nach links-->
<input type="button" name="Stop"  value="Stop"         onclick=    "go('stop')"> <!--bei click auf den Button Stop wird die funktion Stop() ausgeführt die alle intervalle stopt-->
<input type="button" name="Down"  value="Down"         onclick=    "go('runter')"> 
<input type="button" name="Up"      value="Up"           onclick=    "go('rauf')">
<input type="button" name="Turbo" value="Turbo"     onclick=    "go('turbo')"> <!--bei click auf den Button Turbo wird die funktion turbo() ausgeführt und das auto fährt schneller--> 
<input type="button" name="Slow"  value="Slow"         onclick=    "go('slow')"> <!-- bei click auf den button slow wird die funktion slow() ausgeführt und das auto fährt langsamer-->
</div>
<div id="fahren"><!-- Bereich in dem das Auto sich bewegt-->
</div>
<div id="auto"><!--Bereich des Autos-->
</div>
</body>
</html>

[boeserfrosch]

Wird dir auch ne Zeile angegeben wo der Fehler auftritt?
ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"

[Parayia]

ja wohl hab mal die komplette fehlermeldung genommen ^^

rechts is not defined
[IMG]chrome://firebug/content/blank.gif[/IMG] move = window.setInterval("moveto("+anweisung+")", 40); starts.js (Zeile 12)



Ich seh den fehler nur irgendwie nicht ...

[boeserfrosch]

Hast du das noch mitbekommen?

ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"

[Parayia]

ja hab ich gemacht ... hab das ganze auch komplett umgedreht also bei "+anweisung+" und sonst einfache ... wenn ich das mache kommt zwar der Fehler nicht mehr ... aber es bewegt sich auch nix ^^


die if abfrage die ich ganz unten stelle ... bleibt doch die gleiche ... und es is doch nach wie vor go('rechts') / go('links') usw. oder seh ich das falsch?

[boeserfrosch]

gib mir mal bitte deine css-datei dann kann ich mir das mal genauer anschauen

[Parayia]

Ich poste meine Kompletten Dateien in ner zip datei wenn das okay ist :P

[boeserfrosch]

Ich denke das sollte kein Problem sein

[Parayia]

File-Upload.net - auto.zip


wollts hier hochladen ^^ is nur 100kb zu groß :P
unten rechts der kleine download button und danke für deine bemühungen :>

BTW. die dateien movement.js und start.js ignorieren :P waren nur zum ausprobieren ^^ die datei mit deiner möglichkeit ist startS.JS
css datei erkennt man ja .. genau wie die html datei :>

[boeserfrosch]

So funktioniert es jetzt bei mir:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ferngesteuertes Auto</title>
<script    type="text/javascript">
var x = 50;    //variable für die x-achse
var y = 50;    //variable für die y-achse
var t = 8;    //variable für die Zeit 
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
var move = null;
function go(anweisung)  {
if(anweisung == "rechts" || 
anweisung == "links" || 
anweisung == "runter" ||
anweisung == "rauf" ||
anweisung == "right"){

    if(move != null)
    {
        clear(move);
    }
    move = window.setInterval("moveto('"+anweisung+"')", 40);            
    
}       
if(anweisung=="turbo")
            {
                t = t + 10;
            }
if(anweisung == "slow")
            {
                t =  t - 5;
            }
else if(anweisung == "stop")
            { window.clearInterval (move);}


        }


function clear(interval)
{
    window.clearInterval (interval);
}

      
function moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20)             {  
     x = x -  t;
     b = "url(images/links.png)"; 
     document.getElementById("auto").style.left  = (x  + "px"); 
     document.getElementById("auto").style.backgroundImage = b;        
       
      }
break;
case "rechts":

if (x < 1400) 
{             
    
x = x +  t; 
b = "url(images/vor.png)"; 
document.getElementById("auto").style.left  = (x  +   "px"); 
document.getElementById("auto").style.backgroundImage = b;             }
break;
case "rauf":
if (y > 50)         {
     y = y -  t;
     b = "url(images/rauf.png)";
     document.getElementById("auto").style.top  = (y  + "px");
     document.getElementById("auto").style.backgroundImage= b;           }     
break;
case "runter":
if (y < 450 )             {
    y = y +  t; 
    b = "url(images/runter.png)";
    document.getElementById("auto").style.top  = (y  + "px");
    document.getElementById("auto").style.backgroundImage= b;                  }
break;

}
}
function buttonrechts()
{
    
    if(b=='url(images/rechts.png)'){go('rechts');}
    if(b=='url(images/vor.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('links');}
    if(b=='url(images/links.png)'){go('rauf');}
    if(b=='url(images/rauf.png)'){go('rechts');}
}            
function buttonlinks()
{
    if(b=='url(images/vor.png)'){go('links');}
    if(b=='url(images/links.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('right');}
    if(b=='url(images/rechts.png)'){go('rauf');} 
    if(b=='url(images/rauf.png)'){go('links');} 
}



</script>
<style type="text/css">
body
{
width:700px;height:700px;
background-image:url(images/camouflage.png);
}
#auto 
{
top: 50px;
left: 20px;
position: absolute;
background-image:url('images/rechts.png');
width:200px;
height:200px;
background-repeat:no-repeat;
}
#steuer 
{
margin-left:500px;
padding-left:50px;
padding-top:3px;
padding-right:50px;
background:white;
height:30px;
width:570px;
border:5px ridge green;
opacity:0.6;
filter:alpha(opacity=60);
}
#fahren
{
height:600px;
width:1600px;
border:5px ridge green;
opacity:0.2;
filter:alpha(opacity=60);
background:white;
}


</style>
<link rel="stylesheet" href="cardesign.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div id="steuer">
<input type="button" name="Right" value="Right"     onclick=    "buttonrechts()"> 
<input type="button" name="Left"  value="Left"      onclick=    "go('links')" > 
<input type="button" name="Stop"  value="Stop"         onclick=    "go('stop')"> 
<input type="button" name="Down"  value="Down"         onclick=    "go('runter')"> 
<input type="button" name="Up"      value="Up"           onclick=    "go('rauf')">
<input type="button" name="Turbo" value="Turbo"     onclick=    "go('turbo')"> 
<input type="button" name="Slow"  value="Slow"         onclick=    "go('slow')"> 
</div>
<div id="fahren"><!-- Bereich in dem das Auto sich bewegt-->
</div>
<div id="auto"><!--Bereich des Autos-->
</div>

</body>
</html>

[Parayia]

ausprobiert klappt
hoffe du bist noch was da ^^ für den fall eines falles das ich noch iwas an fragen hab

aber ansonsten super :>