Nyx: Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

SELF-Forum

Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

Nyx
– Informationen zu den Bewertungsregeln

Hallo zusammen,
irgendwie stehe ich grad auf dem Schlauch!

Möchte mit Hilfe eines Counters der über einen Button hochgezählt wird entweder die eine oder die andere Grafik einblenden... leider wechselt er aber zwischen den Grafiken nicht!
Versuche momentan die Zählvariable noch zur kontrolle am Ende des Dokumentes auszugeben aber auch da scheitere ich momentan!

  
<!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=iso-8859-1" />  
<title>Untitled Document</title>  
<script type="text/javascript">  
<!--  
  
//-->  
</script>  
  
</head>  
  
<body>  
<form name="Formular" action="">  
<input type="button" value="Farbe aendern" onclick="Counter()">  
</form>  
  
<p>  
  
<script language="JavaScript" type="text/javascript">  
var zahl;  
  
function Counter() {  
 zahl=zahl+1;  
     }  
  
if(zahl%2==1)  
document.write('<img src="redpoint.gif" alt="red" />');  
if(zahl%2==0)  
document.write('<img src="greenpoint.bmp" alt="gruen" />');  
  
  
  
document.write(zahl);  
  
</script>  
  
</p>  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

    bozo20
    – Informationen zu den Bewertungsregeln

    Hallo zusammen,
    Versuche momentan die Zählvariable noch zur kontrolle am Ende des Dokumentes auszugeben aber auch da scheitere ich momentan!

    [...]

    <script language="JavaScript" type="text/javascript">

    ^^ deprecated

    var zahl;

    [...]

    document.write(zahl);
    </script>

    ich lese als ausgabe "undefined", klappt doch alles wunderbar bis hierher

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

    EKKi
    – Informationen zu den Bewertungsregeln

    Mahlzeit Nyx,

    Möchte mit Hilfe eines Counters der über einen Button hochgezählt wird entweder die eine oder die andere Grafik einblenden... leider wechselt er aber zwischen den Grafiken nicht!

    Das heißt, <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=beim Klicken> auf einen Button soll <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=der Inhalt einer Grafik> ausgetauscht werden?

    Versuche momentan die Zählvariable noch zur kontrolle am Ende des Dokumentes auszugeben aber auch da scheitere ich momentan!

    Was genau meinst Du mit "am Ende des Dokuments"?

    <script type="text/javascript">
    <!--

    //-->
    </script>

    Was genau soll dieser leere Skript-Block? Wäre es nicht sinnvoll, Funktionen hier zu definieren? Dann hast Du sie gesammelt an einer Stelle, nicht über den Code verstreut, findest sie wieder und kannst sie ggf. durch <http://de.selfhtml.org/javascript/intro.htm#javascriptdateien@title=Auslagerung in separate Dateien> auch mehreren HTML-Dokumenten zur Verfügung stellen, ohne dass Du sie ständig neu schreiben (oder schlimmer noch: kopieren) musst.

    <input type="button" value="Farbe aendern" onclick="Counter()">

    OK, beim Klicken wird also die Funktion aufgerufen.

    var zahl;

    Eine globale Variable.

    function Counter() {
    zahl=zahl+1;
         }

    Die Funktion zählt diese globale Variable also bei jedem Klick um eins hoch (hätte man natürlich auch einfacher "zahl++;" schreiben können, aber OK).

    if(zahl%2==1)
    document.write('<img src="redpoint.gif" alt="red" />');
    if(zahl%2==0)
    document.write('<img src="greenpoint.bmp" alt="gruen" />');

    document.write(zahl);

    Dieser Code steht außerhalb der Funktion, wird also genau einmal beim Laden des Dokuments ausgeführt. "zahl" ist zu dem Zeitpunkt offenbar leer. Deshalb passiert weiter nichts. Was genau soll passieren? Wie kommst Du auf die Idee, dass dieser Code mehr als einmal (nämlich beim Laden) ausgeführt wird - insbesondere: warum sollte irgendein Klick auf irgendein Formularelement irgendeine Änderung irgendeiner Grafik bewirken?

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

      Nyx
      – Informationen zu den Bewertungsregeln

      Dieser Code steht außerhalb der Funktion, wird also genau einmal beim Laden des Dokuments ausgeführt. "zahl" ist zu dem Zeitpunkt offenbar leer. Deshalb passiert weiter nichts. Was genau soll passieren? Wie kommst Du auf die Idee, dass dieser Code mehr als einmal (nämlich beim Laden) ausgeführt wird - insbesondere: warum sollte irgendein Klick auf irgendein Formularelement irgendeine Änderung irgendeiner Grafik bewirken?

      Oh man, ja... Da war er der dicke Denkfehler.

      Also noch ein Versuch:
      Jetzt besteht das Problem, dass er mit einem grünen Kreis beginnt und dann nach dem Klick auf Rot wechselt auch die Kontrollausgabe zählt auf 1, nur dann passiert leider nicht mehr.
      Ist meine Initialisierung der Variablen der Fehler?

      <!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=iso-8859-1" />  
<title>Untitled Document</title>  
  
</head>  
<body>  
<script language="JavaScript" type="text/javascript">  
var zahl=0;  
document.write('<p><form name="Formular" action="">');  
document.write('<input type="button" value="Farbe aendern" onclick="Counter()"></form></p>');  
document.write('<p><img src="greenpoint.gif" alt="gruen" /></p>');  
  
function Counter() {  
 zahl++;  
  
if(zahl%2==1)  
{  
  
document.write('<p><form name="Formular" action="">');  
document.write('<input type="button" value="Farbe aendern" onclick="Counter()"></form></p>');  
  
document.write('<p><img src="redpoint.gif" alt="red" /></p>');  
document.write(zahl);  
}  
else  
{  
document.write('<p><form name="Formular" action="">');  
document.write('<input type="button" value="Farbe aendern" onclick="Counter()"></form></p>');  
  
  
document.write('<p><img src="greenpoint.gif" alt="gruen" /></p>');  
document.write(zahl);  
  
}  
 }  
  
document.write(zahl);  
  
</script>  
  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

        EKKi
        – Informationen zu den Bewertungsregeln

        Mahlzeit Nyx,

        Jetzt besteht das Problem, dass er mit einem grünen Kreis beginnt und dann nach dem Klick auf Rot wechselt auch die Kontrollausgabe zählt auf 1, nur dann passiert leider nicht mehr.

        "Passiert [...] nichts" ist genauso wie "funktioniert nicht" oder auch "geht nicht" keine sinnvolle und hilfreiche Fehlerbeschreibung. Du erwartest von Deinen Lesern, dass Sie interpretieren, Rate-mal-mit-Nyx spielen oder ihre Glaskugeln hervorkramen? Warum?

        <body>
        <script language="JavaScript" type="text/javascript">
        var zahl=0;
        document.write('<p><form name="Formular" action="">');
        document.write('<input type="button" value="Farbe aendern" onclick="Counter()"></form></p>');
        document.write('<p><img src="greenpoint.gif" alt="gruen" /></p>');

        Was soll das? Warum schreibst Du das Formular nicht direkt in das HTML-Dokument?

        function Counter() {

        Wieso beherzigst Du meinen Vorschlag bzgl. der Stelle der Funktionsdefinitionen in einem HTML-Dokument nicht?

        document.write('<p><form name="Formular" action="">');
        document.write('<input type="button" value="Farbe aendern" onclick="Counter()"></form></p>');

        document.write('<p><img src="redpoint.gif" alt="red" /></p>');
        document.write(zahl);

        Wieso schreibst Du beim Mausklick das gesamte Formular neu? Das ist absolut unnötig - es reicht das <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=Austauschen des Bildes>. Weiterhin hast Du das "Beachten Sie:" bzgl. http://de.selfhtml.org/javascript/objekte/document.htm#write@title=document.write() nicht beachtet. Auch ist das neu geschriebene Formular ein unvollständiges HTML-Dokument.

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

    jürgen Homepage des Autors
    – Informationen zu den Bewertungsregeln

    ich bin zwar kein Profi, hatte aber vor kurzem dasselbe Problem, das hier gelöst wurde:

    die Funktion ist dynamisch und zählt "Zahl" hoch, wohingegen "document.write" statisch bloß 1x bei Seitenaufruf ausgeführt wird!

    In meinem Beispiel wurde in der Funktion "i" immer um 1 erhöht und dieser Wert als id mit Namen "Zähler" ausgelesen. "Zähler" wird dann dynamisch bei jeder Änderung von "i" neu ausgegeben:

    Funktion:
    ---------

      
function next()  
{  
i ++;  
document.getElementById("zaehler").innerHTML = "Foto Nr. " + i;  
}

    Ausgeben auf der Seite:
    -----------------------

      
<p id="zaehler">Foto Nr. 1</p>

    Hier wird "Foto Nr. 1" bei Seitenaufruf angezeigt und dann bei jeder Änderung von "i" (bzw. Aufruf der Funktion) auf "Foto Nr. 2" usw. geändert.

    Sorry, falsch meine Ausführungen nicht ganz fachgerecht sind ...

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Unterschiedliche Grafiken bei unterschiedlichen Eingaben anzeige

      jürgen
      – Informationen zu den Bewertungsregeln

      Hmmm ... zu meinem letzten Post:

      hab da was falsch verstanden - du willst mit der Variable ja auch Bilder ausgeben.

      Definiere die Grafiken als Array:
      ------------------------------------------------------------------------

        
 <script language="JavaScript">  
images = new Array  
var i = 1  
images[1] = "fotos/test-01.jpg"  
images[2] = "fotos/test-02.jpg"  
images[3] = "fotos/test-03.jpg"

      dann eben "i" zB immer um 1 per Funktion erhöhen und an "img" übergeben:
      ------------------------------------------------------------------------

        
function next()  
{  
i ++;  
document.img.src = images[i];  
}

      und dann im Body das Bild (namens "img") ausgeben:
      ------------------------------------------------------------------------

        
<img src="fotos/test-01.jpg" name="img" alt="">  

~~~(das angegebene "test-01.jpg") wird überschrieben  
  
Falls es interessiert: [HIER](http://web485.server-drome.net/menschen.html) könntest Du den Quelltext anschauen.  
  
LG, Jürgen
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln