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)

  • 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

  • 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 :)

  • Ich sehe da kein Problem.


    Du kannst einfach

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


  • 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 :)