• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

globale Variable wird von Javascript nicht angenommen

jojouhr

New member
Hallo zusammen
Ich bin seit ein paar Tagen mit einer Web-Seite zur Steuerung
meines Raspberry Pi beschäftigt. Ich habe 2 Web-Seiten geschrieben,
die jeweils einmal die Motoren und die Webcam ansteuern.
Jede Web-Seite für sich funktioniert auch. Jetzt möchte ich
die beiden Web-Seiten zu einer Web-Seite zusammen fassen.
Dafür habe ich auf der Web-Seite 2 Schaltflächen eingebaut.
Da ist leider irgendwo der Wurm drin.
Wenn ich die globale Variable im Javscript setze, funktioniert es.
( Komentar-Zeichen endfernen.)
Über die Schaltflächen leider nicht.
Um das zu zeigen, habe ich mal den Minimal-Code eingestellt.
der gesammte Code wäre wohl sehr seitenfühlend.
Hier mal der Code:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=ISO-8859-1" 
      http-equiv="content-type">
      <title>GPIO-Test</title>
      </head>
      <body>
 <br>
<br>
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
       <td style="vertical-align: middle; text-align: center;">
            <br>
     </td><td style="vertical-align: top; text-align: center;">
       <input style="width: 64px; height: 64px;" 
              alt="" src="icon/vor.png" 
              id="vor" 
              onmouseout="camstop()" 
              type="image">
     <br>
      </td>
      <td style="vertical-align: middle; text-align: center;">
      <br>
      </td></tr><tr>
      <td style="vertical-align: middle; text-align: center;">
      <form method="post" 
            name="CAM" 
            id="cam" 
        onmousedown="camon()"
                  
    <big><big><big><big style="font-weight: bold;" >
  <big>CAM</big></big></big></big></big>     <br>
      </form>
</td>
<td style="vertical-align: top; text-align: center;">
      <input style="width: 64px; height: 64px;" 
             alt="" src="icon/back.png" 
             id="back" 
             onmouseout="camstop()" 
             type="image">
      <br>
  </td><td style="vertical-align: middle; text-align: center;">
         <big><big><big style="font-weight: bold;">
           </big></big></big>
      <form method="post" 
            name="DRIVE" 
            id="drive" 
   onmousedown="driveon()"       
     <big><big><big><big style="font-weight: bold;">
             <big>DRIVE</big></big></big></big></big>
             <br>
      </form>
</td></tr></tbody></table>
<br>  

<script language="Javascript">
//umschalten zwischen "drive" und "cam"
//var umschalten = "drivestart" ;  //"drive" eingeschaltet
//var umschalten = "camstart" ;  //"cam" eingeschaltet
     
   function camon() {  umschalten = "camstart";  }
   
    document.getElementById('cam').addEventListener('mousedown',
   function camon() {
        document.getElementById('cam').style.backgroundColor = '#33FF33'
      document.getElementById('drive').style.backgroundColor = '#FFFF66' 
          
   } ) 
    //umschalten = "drivestart" ; // "drive" eingeschaltet
    
    function driveon() { umschalten = "drivestart";  }
    
  document.getElementById('drive').addEventListener('mousedown',
    function driveon() {
      document.getElementById('drive').style.backgroundColor = '#33FF33'
        document.getElementById('cam').style.backgroundColor = '#FFFF66' 
   } )  
           
 // "cam" steuerung
 
 if(umschalten == "camstart" ){
 	
 document.getElementById('vor').addEventListener('mouseup', 
  function camstop() {  document.location="cgi-bin/camstop.cgi";
     } )
  document.getElementById('vor').addEventListener('mousedown', 
     function camup() {  document.location="cgi-bin/camup.cgi";
     } )
  document.getElementById('back').addEventListener('mouseup', 
  function camstop() {  document.location="cgi-bin/camstop.cgi";
     } )
   document.getElementById('back').addEventListener('mousedown', 
  function camdown() {  document.location="cgi-bin/camdown.cgi";
      } )
      }
      
 // "drive" steuerung
 
 if(umschalten == "drivestart" ){
 
  document.getElementById('vor').addEventListener('mouseup', 
     function stop() {  document.location="cgi-bin/stop.cgi";
     } )
  document.getElementById('vor').addEventListener('mousedown', 
     function vor() {  document.location="cgi-bin/vor.cgi";
     } )
  document.getElementById('back').addEventListener('mouseup', 
     function stop () {  document.location="cgi-bin/stop.cgi";
     } )
   document.getElementById('back').addEventListener('mousedown', 
     function back() {  document.location="cgi-bin/back.cgi" ;
     } )
     } 
       
</script>
</body>
</html>
 
Das sieht aus als könne man das nicht nachstellen ohne Rasp, oder? Welchen Fehler hast du denn eigentlich?
 
Genau da liegt wahrscheinlich das Problem begraben... außerdem es steht etwas in der Fehlerkonsole: du musst die if-Abfrage schon innerhalb des Eventlisteners machen.
Auch werden deine globalen Funktionen canon und driveon niemals ausgeführt. Dass dein funktionierender Code so aussieht, wage ist stark zu bezweifeln.

Aber dein ganzes Setup kann so nicht wirklich funktionieren, da du ja die Seite wechselst, wenn du irgendwohin klickst. Und dann wird dein JS zurückgesetzt.

PS: das language-Attribut im <script> ist veraltet -> weg damit.
 
Zurück
Oben