Blumentopf: <img> mit js verändern

Hallo, vielleicht kann mir jemand auf die Sprünge helfen:

Ich möchte ein <img> dynamisch verändern, mache aber wohl irgendwas falsch:

<script>

function test(){
	document.getElementById('Bild').style.border = "solid red";
	}
test()
</script>

<style>
.Bild {border:solid green;}
</style>


<img id="Bild" class="Bild" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nPm_sAFKS2C47hBo7QPVfQHaFI%26pid%3D15.1&f=1">

  1. Hallo Blumentopf,

    Das Script wird ausgeführt, bevor das Bild da ist.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Danke dir, Matthias

      1. Hallo Blumentopf,

        Danke dir, Matthias

        Gern, beachte auch die anderen Hinweise in diesem Thread. Zudem ist häufig die bessere Variante, nicht inline-styles zu setzen, sondern die Klassenzugehörigkeit zu ändern.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
  2. Hallo Blumentopf,

    in solchen Fällen muss die erste Bewegung zur Taste F12 gehen (oder wie auch immer der Browser deines geringsten Misstrauens die Entwicklerwerkzeuge öffnet) und dort zur JavaScript Konsole.

    Bei Dir würde sie anzeigen:

    (index):41 Uncaught TypeError: Cannot read property 'style' of null
        at test ((index):41)
        at (index):43
    

    Natürlich hast Du andere Dateinamen und Zeilennummern. Aber der Fehler besagt, dass da die Style-Eigenschaft auf eine Nullreferenz angewendet wird, und die Doku von getElementById sagt, dass die Funktion null liefert wenn das Element nicht gefunden wird.

    Wenn dieses Problemchen hier kein Flüchtigkeitsfehler war, sondern eine Wissenslücke, empfehle ich Dir die JavaScript-Tutorials im Self Wiki, insbesondere „Grundlagen des DOM“.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Rolf, danke für die Erläuterungen. Ich habe auf andere, weniger konventionelle Weise auch herausgefunden, dass der Browser davon ausgeht, dass das gesuchte Element nicht existiert. Nur konnte ich es mir nicht recht erklären, da ich dachte, das Element wäre strukturell auch schon vorhanden und in seinen Eigenschaften ansprechbar, auch wenn sein Inhalt noch nicht geladen ist. Danke auch für den Link, das schadet sicher nicht, da noch etwas nachzulesen..

  3. @@Blumentopf

    mache aber wohl irgendwas falsch:

    <img id="Bild" class="Bild" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nPm_sAFKS2C47hBo7QPVfQHaFI%26pid%3D15.1&f=1">
    

    Du hast das zwingend notwendige alt-Attribut vergessen.

    Leider hat niemand der Antwortenden genügend Sorgfalt walten lassen und auf diesen Fehler hingewiesen. Jetzt, wo Blumentopf sein/ihr Problem gelöst denkt, kommt er/sie womöglich nicht mehr her – und die Chance ist vertan. 😡

    Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als &amp; escapet werden.

    <img id="Bild" class="Bild" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nPm_sAFKS2C47hBo7QPVfQHaFI%26pid%3D15.1&amp;f=1" alt="Hundejunges">
    

    ID und Klasse sind hier nur beispielhaft? Eine Klasse „Bild“ macht für ein img-Element überhaupt keinen Sinn; und auch als ID ist die Benennung fragwürdig.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. hallo

      @@Blumentopf

      mache aber wohl irgendwas falsch:

      <img id="Bild" class="Bild" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nPm_sAFKS2C47hBo7QPVfQHaFI%26pid%3D15.1&f=1">
      

      Du hast das zwingend notwendige alt-Attribut vergessen.

      korrekt wäre: alt="irrelevant da Beispiel"

      Leider hat niemand der Antwortenden genügend Sorgfalt walten lassen und auf diesen Fehler hingewiesen. Jetzt, wo Blumentopf sein/ihr Problem gelöst denkt, kommt er/sie womöglich nicht mehr her – und die Chance ist vertan. 😡

      Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als &amp; escapet werden.

      korrekt wäre: in einem HTML-Kontext eröffnet & eine escape Sequenz

      <img id="Bild" class="Bild" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nPm_sAFKS2C47hBo7QPVfQHaFI%26pid%3D15.1&amp;f=1" alt="Hundejunges">
      

      ID und Klasse sind hier nur beispielhaft? Eine Klasse „Bild“ macht für ein img-Element überhaupt keinen Sinn; und auch als ID ist die Benennung fragwürdig.

      Auch das können wir korrigieren: id="Beispiel" class="Beispiel"

      1. @@beatovich

        Du hast das zwingend notwendige alt-Attribut vergessen.

        korrekt wäre: alt="irrelevant da Beispiel"

        Das könnte als „das alt-Attribut ist bei Beispielen irrelevant“ missverstanden werden.

        Was du meinst: der genaue Wortlaut des alt-Attributs ist bei Beispielen irrelevant. Und auch das würde ich so nicht sagen.

        Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als &amp; escapet werden.

        korrekt wäre: in einem HTML-Kontext eröffnet & eine escape Sequenz

        Aber ist das einem Anfänger auch verständlich? „HTML-Kontext“? „escape“? „Sequenz“?

        Außerdem ist ein Deppenleerzeichen alles andere als korrekt.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Aloha ;)

      Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als &amp; escapet werden.

      Jein. Kann man machen. Kann Fehler vermeiden - aber solange nicht zu befürchten ist, dass darauf irgendwo ein ; folgt, ist das auch nicht-escaped unproblematisch, da es ja kein ambiguous ampersand ist.

      Verboten ist laut HTML-Spec nämlich nicht das Ampersand generell, sondern nur dann, wenn es tatsächlich missverstanden werden kann.[1]

      Zum Zweck der besseren Lesbarkeit würde ich an den Stellen, an denen es unproblematisch ist, das & einfach so verwenden wie es ist.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[

      1. Zitat: „Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.“ ↩︎

      1. @@Camping_RIDER

        Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als &amp; escapet werden.

        Jein. Kann man machen. Kann Fehler vermeiden - aber solange nicht zu befürchten ist, dass darauf irgendwo ein ; folgt, ist das auch nicht-escaped unproblematisch […] Zum Zweck der besseren Lesbarkeit würde ich an den Stellen, an denen es unproblematisch ist, das & einfach so verwenden wie es ist.

        Hm …

        TIL: Browser handhaben nicht mit Semikolon abgeschlossene Sequenzen &<entity-name> in Elementinhalt und Attributwert unterschiedlich. Während ?foo=foo&copy=copy im Inhalt zu ?foo=foo©=copy aufgelöst wird, bleibt es in Attributwerten (also auch in href) so erhalten (bspw. <a href="?foo=foo&copy=copy">)

        Testseite

        Ich denke, früher war das nicht so und nicht escapete & hatten tatsächlich zur Folge, dass der URI (genauer gesagt: der Query-Teil) u.U. nicht so war wie beabsichtigt, sondern bspw. <a href="?foo=foo©=copy">.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Aloha ;)

          TIL: Browser handhaben nicht mit Semikolon abgeschlossene Sequenzen &<entity-name> in Elementinhalt und Attributwert unterschiedlich. Während ?foo=foo&copy=copy im Inhalt zu ?foo=foo©=copy aufgelöst wird, bleibt es in Attributwerten (also auch in href) so erhalten (bspw. <a href="?foo=foo&copy=copy">)

          Ja, mag sein. Wobei der Umstand, dass &copy durch die Browser überhaupt auf das Copyright-Zeichen aufgelöst wird, eigentlich nicht standardkonform ist, denn eigentlich darf das nur bei &copy; passieren. Aber das ist halt wohl mal wieder einer der Fälle, in denen Browser mit dem Versuch, fehlerhaften Code automatisch zu korrigieren, korrekten Code, der wie ein Fehler aussieht, kaputtrendern. Doofe Sache.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    3. Danke für den Hinweis, ich vergesse das ALt-Attribut normalerweise nicht, in diesem Fall habe ich nicht meinen eigentlichen Code verwendet, sondern alles auf das Problem zusammen gekürzt, und dabei nicht die übliche Sorgfalt bezüglich des Alt-Attributes walten lassen. Das gleiche gilt für Klasse und ID.