Tom-K: Sich aktualisierende Zeit in Verlinkung einbinden

Guten Tag zusammen,

ich möchte die aktuelle Zeit in die Verlinkung eines Bildes (mit verkleinerter Vorschau) einbinden, welches minütlich aktualisiert wird. Leider verstehe ich nicht wie ich den "document"-Befehl dazu benutzen muß/kann. Ich habe es auch schon mit "document.write" versucht. Aktuell scheitere ich an "document.getElementById". Den Aufruf habe ich auch schon mit <a id="Lnk"></a> versucht.

Ich bitte euch hierbei um Unterstützung.

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var d = today.getDate();
    var Mo = today.getMonth()+1;
    var Y = today.getFullYear();
    Mo = checkTime(Mo);
    d = checkTime(d);
    h = checkTime(h);
    m = checkTime(m);
    var Lnk1 = 'http://bild.jpg?';
    var Lnk2 = ' target="_blank">';
    var Lnk3 = '<img src="http://bild.jpg?';
    var Lnk4 = ' alt="bild" height="90" width="120" border="1"></a>';
    document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
    var t = setTimeout(startTime, 60000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // führende 0 wenn < 10
    return i;
}
</script>

</head>
<body onload="startTime()">
<a href="Lnk"></a>

</body>
</html>
  1. Hallo,

    Den Aufruf habe ich auch schon mit <a id="Lnk"></a> versucht.

    Das ist aber der richtige Weg. Wenn du getElementById verwendest, brauchst du natürlich auch ein entsprechendes Element mit genau dieser ID.

    document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
    

    vielleicht bietet sich hier setAttribute an.

    Gruß
    Kalk

    1. Hi,

      vielleicht bietet sich hier setAttribute an.

      auch wenn das vielleicht in die richtige Richtung geht: Nach meiner Erfahrung ist es meist günstiger, die Eigenschaften des Elementobjekts direkt zu setzen, anstatt den Umweg über setAttribute() zu nehmen.

      So long,
       Martin

      1. Den Aufruf habe ich auch schon mit <a id="Lnk"></a> versucht.

        Tabellenkalk: Das ist aber der richtige Weg. Wenn du getElementById verwendest, brauchst du natürlich auch ein entsprechendes Element mit genau dieser ID.

        Verstehe ich nicht, die ID ist doch "Lnk" und diese wird mit folgender Codezeile gesetzt:

        document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
        

        Ich bekomme aber keinen Link, sondern den Link nur als Text, gefolgt von dem kleinen Vorschaubild ohne Verlinkung. Es sollte jedoch das kleine Vorschaubild als "verlinkte Fläche" zum Draufklicken werden...?! Wobei "Lnk" mit oder ohne Anführungszeichen oder Apostroph egal ist. Und mit <a href="Lnk"></a> bekomme ich gar nichts angezeigt.

        Und so schaut das aus. Aber das ist Text kein Link.

        Ein kleines Beispiel würde mir vielleicht helfen.

        1. Hallo

          Den Aufruf habe ich auch schon mit <a id="Lnk"></a> versucht.

          Tabellenkalk: Das ist aber der richtige Weg. Wenn du getElementById verwendest, brauchst du natürlich auch ein entsprechendes Element mit genau dieser ID.

          Verstehe ich nicht, die ID ist doch "Lnk" …

          In einem anderen Posting und auch hier weiter unten ist es aber <a href="Lnk"></a>. Wie denn nun?

          … und diese wird mit folgender Codezeile gesetzt:

          document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
          

          Nein. Wird und kann sie nicht. Die ID kann, wie der Funktionsname (getElementById: „greif' das Element mit der ID“) sagt, nur gelesen bzw. gefunden, aber nicht gesetzt werden. Ein Element mir der ID muss also vorhanden sein, um es mit JavaScript anzusprechen. Wenn die ID vorhanden ist, bekommst du, wie du nachfolgend bestätigst, genau das, was du definierst.

          Ich bekomme aber keinen Link, sondern den Link nur als Text, gefolgt von dem kleinen Vorschaubild ohne Verlinkung.

          Das ist, was du oben anweist. Du sagst, der Inhalt des Elements soll aus den Inhalten der Variablen Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4 bestehen. Der Inhalt ist das, was zwischen dem öffnenden (<a id="Lnk1">) und dem schließenden Tag (</a>) steht.

          Es sollte jedoch das kleine Vorschaubild als "verlinkte Fläche" zum Draufklicken werden...?!

          Dann solltest du die Inhalte der Variablen an die richtigen Stellen verteilen.

          Und mit <a href="Lnk"></a> bekomme ich gar nichts angezeigt.

          Dann gibt's ja vermutlich auch keine ID „Lnk“, die mit getElementById gefunden werden könnte. Dass der Text „Lnk“ im href-Attribut nichts zu suchen hat, ist eine andere Frage.

          Und so schaut das aus. Aber das ist Text kein Link.

          Da sind -zig Links, aber kein Text.

          Google-Drive-Beispiel

          Ein kleines Beispiel würde mir vielleicht helfen.

          Wie ein Link (<a>) aufgebaut ist, zeigt dir das Wiki. Damit sollte klar werden, was wo hinkommt. Das ist, was du mit JavaScript zusammenbauen willst. Du suchst das Element also z.B. über dessen ID, fügst die Ziel-URL in das Attribut href ein und das Bild per innerHTML zwischen <a> und </a>.

          Tschö, Auge

          --
          Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
          Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
  2. @@Tom-K

    var Lnk1 = 'http://bild.jpg?';
    var Lnk2 = ' target="_blank">';
    var Lnk3 = '<img src="http://bild.jpg?';
    var Lnk4 = ' alt="bild" height="90" width="120" border="1"></a>';
    document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
    

    Als Einzeiler:

    document.getElementById('Lnk').innerHTML='http://bild.jpg?'+Y+Mo+d+h+m+' target="_blank">'+'<img src="http://bild.jpg?'+Y+Mo+d+h+m+' alt="bild" height="90" width="120" border="1"></a>';
    

    Wie soll das einen Link ergeben, wenn es kein <a>-Start-Tag gibt?

    Um deiner nächsten Frage vorzugreifen: Wie soll das einen Link ergeben, wenn es kein href-Attribut gibt?

    Und "bild" ist als Alternativtext für ein Bild völlig unsinnig.

    "bild" === "blöd", kommt mir bekannt vor.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. Hi,

      document.getElementById('Lnk').innerHTML='http://bild.jpg?'+Y+Mo+d+h+m+' target="_blank">'+'<img src="http://bild.jpg?'+Y+Mo+d+h+m+' alt="bild" height="90" width="120" border="1"></a>';
      

      Wie soll das einen Link ergeben, wenn es kein <a>-Start-Tag gibt?

      Gibt es doch:

      Den Aufruf habe ich auch schon mit <a id="Lnk"></a> versucht.

      das a-Start-Tag ist also schon vorhanden. Die Frage ist eher: warum soll das a-End-Tag ins innerHTML des a-Elements geschrieben werden?

      cu,
      Andreas a/k/a MudGuard

      1. @@MudGuard

        Gibt es doch:

        Den Aufruf habe ich auch schon mit <a id="Lnk"></a> versucht.

        Ah. Also entweder gibt es <a id="Lnk"></a> ohne href, also keinen Link. Oder es gibt <a href="Lnk"></a> mit vermutlich falschem Ziel und ohne Linktext, da document.getElementById('Lnk') ins Leere greift.

        @Tom-K Du willst

        1. dir eine Referenz auf das HTML-Element holen: var link = document.getElementById('Lnk');
        2. das Linkziel setzen: link.href = 'http://bild.jpg?' + Y + Mo + d + h + m;
        3. das Bild als Elementinhalt: link.innerHTML = '<img src="http://bild.jpg?' + Y + Mo + d + h + m + ' alt="bild" height="90" width="120" border="1">';

        Dass "bild" kein sinnvoller Linktext ist, hatten wir ja schon.

        LLAP 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        1. Hallo zusammen,

          erstmal vielen Dank für die angeregte Diskussion, doch da ich was Java angeht, ein totaler Laie bin ist mir das etwas viel "Fachchinesisch".

          Dass "bild" kein sinnvoller Linktext ist, hatten wir ja schon.

          Das war mir auch klar, und es sollt auch nur ein Platzhalter sein. Es geht hier um Bilder einer Kamera, die im Minutenrhythmus gespeichert werden, und die ich in eine Seite zwischen den Text einbinden möchte. Der Link muß sich also auch im Minutenrhythmus aktualisieren.

          Den Text bekomme ich hin, das Bild auch, aber nur getrennt voneinander, und es aktualisiert sich nicht selbst, wenn ich anstatt dieser Zeile:

          document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
          

          die folgende Zeile verwende:

          document.write('<a href="'+Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4+'</a>');
          

          Mir fehlt der Durchblick wie ich meine zusammengesetzte Variable integrieren und aufrufen muß, daß daraus ein kleines Bild mit hinterlegtem Link entsteht, das von Text umgeben ist, und wo man mit einem Klick darauf das große Bild öffnen kann.

          Ich habe eine Webcam für ein Beispiel gefunden:

          <!DOCTYPE html>
          <html>
          <head>
          <script>
          function startTime() {
              var today = new Date();
              var h = today.getHours();
              var m = today.getMinutes();
              var d = today.getDate();
              var Mo = today.getMonth()+1;
              var Y = today.getFullYear();
              Mo = checkTime(Mo);
              d = checkTime(d);
              h = checkTime(h);
              m = checkTime(m);
              var Lnk1 = 'http://s2.taunus.info/img/webcams/grosser-feldberg.jpg?';
              var Lnk2 = '" target="_blank">';
              var Lnk3 = '<img src="http://s2.taunus.info/img/webcams/grosser-feldberg.jpg?';
              var Lnk4 = '" alt="Taunus-Bild" height="90" width="120" border="1"></a>';
              document.write('<a href="'+Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4+'</a>');
              var t = setTimeout(startTime, 60000);
          }
          function checkTime(i) {
              if (i < 10) {i = "0" + i};  // führende 0 wenn < 10
              return i;
          }
          </script>
          </head>
          <body onload="startTime()">
          <div align="left">
          <font size="1" face="verdana" color="#000000">Wie ist das Wetter im Taunus?<br><br></font>
          Hier sollte das kleine Bild mit dem Link sein<br><br>
          <font size="1" face="verdana" color="#000000">Nachts dunkel, Tags hell.</font>
          </div>
          </body>
          </html>
          
          1. Hallo

            erstmal vielen Dank für die angeregte Diskussion, doch da ich was Java angeht, ein totaler Laie bin ist mir das etwas viel "Fachchinesisch".

            Java ist nicht JavaScript und hat – fachchinesisch hin, fachchinesisch her – mit der hiesigen Diskussion nichts zu tun.

            Es geht hier um Bilder einer Kamera, die im Minutenrhythmus gespeichert werden, und die ich in eine Seite zwischen den Text einbinden möchte. Der Link muß sich also auch im Minutenrhythmus aktualisieren.

            Den Text bekomme ich hin, das Bild auch, aber nur getrennt voneinander,

            Wo ist dein Problem? Gunnar hat dir jeden einzelnen Schritt mit Links zu Dokumentationen aufgelistet. Die einzelnen Schritte, die nach dienen Worten einzeln funktionieren, zu kombinieren kann ja nun so schwer auch nicht sein.

            … wenn ich anstatt dieser Zeile:

            document.getElementById('Lnk').innerHTML=Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4;
            

            die folgende Zeile verwende:

            document.write('<a href="'+Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4+'</a>');
            

            Mir fehlt der Durchblick wie ich meine zusammengesetzte Variable integrieren und aufrufen muß, daß daraus ein kleines Bild mit hinterlegtem Link entsteht, das von Text umgeben ist, und wo man mit einem Klick darauf das große Bild öffnen kann.

            Liest du, was wir dir schreiben? Benutzt du deine Maus oder deinen Finger gelegentlich dazu, die Links, die wir dir gegeben haben, aufzurufen und die Inhalte zu konsumieren? Gunnar und ich haben auseinandergenommen, welche deiner Inhalte wohin gehören. Ich habe dir zudem den Wiki-Artikel verlinkt, in dem der Aufbau ein es Links erklärt wird.

            Hättest du ihn gelesen, wäre dir längst klar geworden, dass document.write('<a href="'+Lnk1+Y+Mo+d+h+m+Lnk2+Lnk3+Y+Mo+d+h+m+Lnk4+'</a>'); keinen gültigen und funktionierenden HTML-Quelltext für einen Link erzeugt. Da kommt folgendes heraus …

            <a href="http://bild.jpg20160216852 target="_blank"><img src="http://bild.jpg?20160216852 alt="bild" height="90" width="120" border="1"></a>
            

            … und das kann nicht funktionieren.

            Du scheinst aber lieber irgendwas auszuprobieren und im Code herumzustochern statt die dir gegebenen Hinweise zu benutzen, um deine Kenntnisse Schritt für Schritt auszubauen. Schade.

            Ich habe eine Webcam für ein Beispiel gefunden:

            Das ist genauso – lies: auf genau die selbe Weise – kaputt, wie dein Code.

            Tschö, Auge

            --
            Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
            Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
            1. Liest du, was wir dir schreiben? ...

              Ich habe alles mehrfach gelesen was ihr alle geschrieben habt - danke. Doch das war für mich = "hören"<>"verstehen", was nicht unbedingt daran lag, daß ich begriffsstutzig bin sondern eher daran, daß ihr zuviel Grundwissen voraussetzt - aber das ist ein generelles Problem bei der Kommunikation mit Fachleuten.

              Wie ein Link (<a>) aufgebaut ist, zeigt dir das Wiki.

              Im Wiki hatte ich auch versucht eine Lösung zu finden, und mich deshalb an euch gewandt...

              Ein etwas verständlicherer Hinweis, daß "Elementinhalt", wie von LLAP ausgeführt, einmal für den Link des angezeigten Bildes UND einmal für die Verlinkung selbst zugewiesen werden muß, und nicht in eine Variable gepackt werden kann, wäre hilfreicher gewesen. Ebenso daß "alt", "height", "width" & "border" aber nicht "target" in eine Variable geschrieben werden kann. Das hätte sehr viel Schreiberei gespart.

              "bild" === "blöd", kommt mir bekannt vor.

              Übrigens, es gibt keine dummen Fragen, nur dumme Antworten.

              Jetzt funktioniert es so wie ich möchte, falls ihr noch Korrekturvorschläge habt...

              <!DOCTYPE html>
              <html>
              <head>
              <script>
              function startTime() {
              	if(document.getElementsByTagName) { // gegen js-Fehler
              		var today = new Date();
              		var h = today.getHours();
              		var m = today.getMinutes();
              		var d = today.getDate();
              		var Mo = today.getMonth()+1;
              		var Y = today.getFullYear();
              		Mo = checkTime(Mo);
              		d = checkTime(d);
              		h = checkTime(h);
              		m = checkTime(m);
              		var Lnk1 = 'http://s2.taunus.info/img/webcams/grosser-feldberg.jpg?';
              		var Lnk2 = '<img src="http://s2.taunus.info/img/webcams/grosser-feldberg.jpg?';
              		var Lnk3 = ' alt="Bild" height="90" width="120" border="0">';
              		document.getElementById('a').innerHTML=Lnk2+Y+Mo+d+h+m+Lnk3;
              		document.getElementById('a').href=Lnk1+Y+Mo+d+h+m;
              		var t = setTimeout(startTime, 60000);
              	}
              	function checkTime(i) {
              		if (i < 10) {i = "0" + i};  // führende 0 wenn < 10
              		return i;
              	}
              }
              </script>
              
              </head>
              <body onload="startTime()">
              <a id="a" href="a" target="_blank"></a>
              </body>
              </html>
              
              1. Hallo Tom-K,

                Du verwendest kein getElementsByTagName. Inwiefern sollte das gegen JavaScriptfehler helfen? Beinahe alle Browser verstehen dies. Du schließt auf diese Weise also nicht mal irgendwelche Uralt-Browser aus.

                Dieses if kann also mMn ersatzlos weg.

                Eine ID a zu nennen, ist möglich. Vielleicht möchtest du sie aber ein wenig mehr nach dem Sinn des a-Elements benennen.

                target = "_blank" würde ich auch entsorgen, lass dem Nutzer die Wahl, ob er wirklich ein neues Fenster öffnen möchte.

                In den HTML-Quelltext geschriebene on--Attribute sind nicht mehr aktuell. Schau dir dazu z.B. addEventListener im Wiki an.

                Bis demnächst
                Matthias

                --
                Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
              2. Hallo

                Liest du, was wir dir schreiben? ...

                Ich habe alles mehrfach gelesen was ihr alle geschrieben habt - danke. Doch das war für mich = "hören"<>"verstehen", was nicht unbedingt daran lag, daß ich begriffsstutzig bin sondern eher daran, daß ihr zuviel Grundwissen voraussetzt - aber das ist ein generelles Problem bei der Kommunikation mit Fachleuten.

                Ok, das ist leider so. Darauf hättest du übrigens auch hinweisen dürfen, damit wir das ändern. Wir wissen ja nicht von vornherein, was wir voraussetzen können und was nicht. Nicht, dass hinterher der Vorwurf des Kindergartensprechs kommt, man sei ja schließlich viel weiter. ;-)

                Wie ein Link (<a>) aufgebaut ist, zeigt dir das Wiki. Im Wiki hatte ich auch versucht eine Lösung zu finden, und mich deshalb an euch gewandt...

                Ein etwas verständlicherer Hinweis, daß "Elementinhalt", wie von LLAP ausgeführt, einmal für den Link des angezeigten Bildes UND einmal für die Verlinkung selbst zugewiesen werden muß, und nicht in eine Variable gepackt werden kann, wäre hilfreicher gewesen.

                Aber genau diesen Hinweis hat er in den Punkten 2 und 3 seiner Aufzählung doch gegeben?

                "bild" === "blöd", kommt mir bekannt vor. Übrigens, es gibt keine dummen Fragen, nur dumme Antworten.

                Sag' das nicht mir, auch wenn ich der ursprünglichen Aussage für sich genommen grundsätzlich nicht widersprechen mag.

                Jetzt funktioniert es so wie ich möchte, falls ihr noch Korrekturvorschläge habt...

                Deinem img fehlt immer noch das schließende „"“ für das src-Attribut. Auf weitere Fehler und Unstimmigkeiten hat dich ja schon Matthias aufmerksam gemacht.

                Tschö, Auge

                --
                Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
                Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
              3. Hallo,

                Ein etwas verständlicherer Hinweis, daß "Elementinhalt", wie von LLAP ausgeführt, einmal für den Link des angezeigten Bildes UND einmal für die Verlinkung selbst zugewiesen werden muß, und nicht in eine Variable gepackt werden kann, wäre hilfreicher gewesen.

                dieser Absatz lässt mich vermuten, dass du jetzt vielleicht eine funktionierende Lösung hast, aber immer noch nicht verstanden hast, wie es funktioniert.

                Übrigens: Der Mann heißt Gunnar; LLAP ist die Abkürzung für Live Long And Prosper.

                Ja, du hast zwei Elemente: Einen Link und ein Bild. Das Bild (das img-Element) ist der Elementinhalt des Links.

                Ebenso daß "alt", "height", "width" & "border" aber nicht "target" in eine Variable geschrieben werden kann. Das hätte sehr viel Schreiberei gespart.

                Die Attribute alt, height, width und border sind in deinem Fall Attribute des img-Elements, target aber ein Attribut des a-Elements (des Links). Logisch, dass man die getrennt halten muss, oder?

                So long,
                 Martin

              4. Lieber Tom-K,

                Übrigens, es gibt keine dummen Fragen, nur dumme Antworten.

                das ist einfach nicht richtig. Es gibt sehr wohl dumme Fragen! Das soll jetzt nicht heißen, dass ich Deine Fragen in diesem Thread für dumm halte, und es soll auch nicht heißen, dass ich die Art und Weise, wie @Auge mit einem offensichtlichen Anfänger umgeht, der sich ebenso offensichtlich sehr gut selbst im Weg stehen kann, gut heiße.

                Wenn jemand auf einen Hinweis hin nicht oder nicht ausreichend nachdenkt und unüberlegt fragt, kann es sehr gut sein, dass der Befragte die Frage als dumm empfindet. Mir geht das sehr häufig so. Aber anscheinend darf man das aus Gründen der Höflichkeit niemandem heute mehr sagen...

                Liebe Grüße,

                Felix Riesterer.