<img> mit js verändern

[Blumentopf]

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">

[Matthias Apsel]

Hallo Blumentopf,

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

Bis demnächst
Matthias

[Blumentopf]

Danke dir, Matthias

[Matthias Apsel]

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

[Rolf B]

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

[Blumentopf]

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..

[Gunnar Bittersmann]

@@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 & 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 🖖

[beatovich]

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 & 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"

[Gunnar Bittersmann]

@@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 & 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 🖖

[Camping_RIDER]

Aloha ;)

Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als & 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

---

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.“ ↩︎

[Gunnar Bittersmann]

@@Camping_RIDER

Außerdem ist & im HTML ein Sonderzeichen; sollte demzufolge als & 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 🖖

[Camping_RIDER]

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 © 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

[Blumentopf]

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.