Javascript, Button ein Bild zuweisen?

Ich habe eine HTML datei mit Javascript verknüpft. Nun habe ich in HTML mehrere Buttons, aber ich möchte in Javascript den Buttons ein Bild zuweisen.

Ich habe bereits gefunde wie man ein Bild ladet aber nicht wie man es einen Button zuweist.

Ich bitte um Hilfe

let example = new Image();
example.src= "example.png";

Answer 1

[regex9]

Entweder du fügst dem Button ein Bild als Subelement hinzu:

<button id="buttonWithImage"></button>
<script>
  document.getElementById("buttonWithImage").innerHTML = "<img alt=\"Bildbeschreibung\" src=\"path/to/image.jpg\">";
</script>

oder du gibst ihm ein Hintergrundbild:

document.getElementById("buttonWithImage").style.backgroundImage = "url('path/to/image.jpg')";

Weitere Einstellungen (wie Bildausschnitt u.ä.) kannst du via CSS vornehmen.

PS.: Bitte tagge JavaScript-Fragen nicht mit Java. Es handelt sich bei beiden Begriffen um jeweils völlig andere Programmiersprachen.

Comments

[Leonad]

Noch eine kleine Frage. Wie kann ich statt den Pfad zum Bild, ein Array wo der Pfad steht als pfad nehmen?

und Danke für die Hilfe

[regex9]

@Leonad

Angenommen, dein Array sieht so ungefähr aus:

let paths = [ "some/path/to/image.jpg", "some/path/to/other/image.jpg" ];
let path = paths[0];

Dann kannst du dir den Pfad via Indexer aus dem Array holen. Die Zählung beginnt bei 0.

Wenn dein Array aber die jeweiligen Pfadbestandteile beinhaltet, musst du dir einen String bilden.

let paths = [ "some", "path", "to", "image.jpg" ];
let path = paths.join("/");

Hier werden alle Arrayelemente zu einem String konkateniert. Als Trennzeichen zwischen jedem Element wird ein Slash gesetzt. Der join-Funktion muss aber nicht unbedingt ein Trennzeichen überreicht werden, wenn man keines benötigt.

Answer 2

[RakonDark]

als submit in form

<input id="mybutton" type="image" src="dasbild.png" alt="druecken">

einfach ein image als link button

<a hef="http://example.com" style="text-decoration:none;">
<img id="mybutton" src="dasbild.png" alt="druecken">
</a>

und dann javascript :

document.getElementbyId("mybutton").src = example.src;