HTML und JavaScript <img> in Tabellenfeld über Funktion einfügen

Hallo,

ich programmiere ein Tic Tac Toe game in HTML mit JS. Mein code ist fertig und alles funktioniert. Anfangs dachte ich das ich für dein Kreis und das Kreuz einfach mal ein "x" und ein "o" nehme. Jetzt möchte ich aber anstatt diesen zwei Symbolen gerne PNG's anzeigen.

Ich finde nur nichts Genaues im web dazu.

Ich greife in meinen Funktionen auf jedes Feld der Tabelle mit einer ID zu:

document.getElementById("obenLinks").innerHTML = "x";

Dieses x möchte ich durch ein Bild ersetzen und bin am verzweifeln.

Würde mich sehr über Hilfe freuen,

Liebe Grüße

Leonard

(im Anhang ein Screenshot von einer meiner Funktionen)

Zitat von basti1012

Erstelle doch mal bei codepen.io ein Beispiel.

Dann kann man das alles auch besser testen.

Normalerweise kannst du ohne problem ein Bild reinsetzen.

Dein innerHTML könnte man bei einen <img mit einen src tauschen.

Man könnte auch Klassennutzen.

Deswegen wäre ein funktionierender Code ganz gut und man könnte dir genauer helfen.

PS: Font-awesome Icons könnte man da auch nutzen

Alles anzeigen

https://codepen.io/hfg-leonard-t/pen/MWjJwEe

Das ist der Link zu meinem Spiel. Ich habe mich gerade zum ersten mal auf codepen.io angemeldet und weiß deshalb nicht wie ich meine pngs da hoch lade. Aber um den Code nachvollziehen zu könne müsste das reichen glaube ich.

Vielen Dank für die Antwort

Zitat von AndreasB

Ich sehe da kein Problem.

Du kannst einfach

JavaScript

const iconX = '<img src="myimage.png" />'

definieren und beim Click über innerHTML setzen.

Du kannst in der freien Version von Codepen keine Bilder hochladen (Asset Hosting ist ein Pro feature).

Du kannst aber deine Bilder auf einer anderen Platform (zB Dropbox) hochladen und von Codepen aus darauf verweisen.

Tip:
schau dir nochmal das Arbeiten mit EventHandlern an und im speziellen, wie du den selben Handler mehrfach verwenden kannst.

Dadurch kannst du enorm viel Code einsparen.

Alles anzeigen

Vielen Dank jetzt hat es funktioniert. Ich bin nicht drauf gekommen das ich das Bild erst als Konstante definieren muss. Vielen Dank dir, hat mir sehr geholfen