Wie zum hinzufügen von Bild-button per Javascript?

Ich versuche zum hinzufügen von Bild-buttons habe ich mit Javascript, aber ich kann nicht scheinen, um es funktioniert. Ich habe erfolgreich hinzugefügte Bild mithilfe von HTML5, aber für meine Bedürfnisse muss ich hinzufügen, das Bild per javascript.

Unten ist das, was ich geschrieben habe, hinzufügen von Bildern via HTML.

<button class="button" id="Ok"><img src="images/ok.png"></button>

Unten ist das, was ich habe versucht, hinzufügen Bild per Javascript, aber es scheint nicht zu funktionieren.

var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
      buttons[b].src = "images\ok.png";   
  }

Ich bin nicht sicher, was mache ich falsch, jede Hilfe wäre nett. Danke.

NÖ, kein Glück. Immer diese Fehlermeldung: TypeError: Cannot set property 'src' null.

InformationsquelleAutor Henry | 2016-03-02

2

Ich weiß nicht, ob das ist, was du brauchst.
```
<button id="button"></button>

<script type="text/javascript">
    var buttons = document.getElementById("button");
    buttons.innerHTML = '<img src="images\ok.png" />';
</script>
```
Danke, diese scheinen zu tun den trick 🙂
Ihr willkommen. Ich bin froh, Ihnen zu helfen . 🙂
Ich habe 1 Problem, weil es ein Bild in die Taste, es überlappt die Schaltfläche und wenn ich auf den Abschnitt der Taste, wo das Bild ist, die website scheint nicht aufzeichnen meine Klicks.
ist es möglich, die img-tag die gleiche id, wie der button es ist in
bitte aktualisieren Sie Ihre Frage oben, so dass wir verfolgen können, das problem. fügen Sie Ihren code oben auch....

InformationsquelleAutor MGB C

Ich würde die Taste in einem block-element und geben Sie ein Hintergrundbild.

HTML:

<button class="button" id="Ok"></button>

CSS:

.button{
display:inline-block;
background:none;
width: 50px;
height: 20px;
}
.button.okay{
background:url('images/ok.png');
}

JS:

var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
 buttons[b].classList.add("okay");
  }

Hi, dies versucht aber es funktioniert nicht. Außerdem will ich einen Weg, dass nur javascript verwendet

InformationsquelleAutor itamar

1

Denke ich, dass Sie fehlt, wählen Sie tag , setzen Sie nur src Inhalte für das button-element. Können Sie versuchen, mit dieser
```
for (var b = 0; b < buttons.length; b++) {
   buttons[b].getElementsByTagName("img").src = "images\ok.png";   
}
```
Nope, das scheint auch nicht zu funktionieren
Können Sie versuchen zu trösten.melden Sie, wie viele <img> es kann sich im inneren Schleife. for (var b = 0; b < Tasten.length; b++) { buttons[b].getElementsByTagName("img").src = "images\ok.png"; console.log(buttons[b].getElementsByTagName("img")); } Wenn es ein leeres array ist, können wir versuchen einen anderen Weg
Was meinst du?, wenn ich versuche die Konsole.log(b); es gibt wieder 28 zahlen, das ist weil ich 28 Tasten.
Befehl "src" gelten nur für die <img> tag. Der Grund, warum ich ' m versuchen zu bekommen <img> - tag in <button>. Möglicherweise werden einige button nicht haben <img> - tag, und die Schleife wird beendet. Auf diesem Fall, Sie können Zustand!
Oh, keine Tasten haben, die img-Tags auf Sie. Ich dachte, es ist nicht erforderlich, weil ich nicht hinzufügen Bild per html.

InformationsquelleAutor Binh Tran
1

Ich denke, dies kann sein, was Sie suchen für.... dies setzt die Schaltflächen direkten hintergrund als das Bild. Aber Sie müssen die width und height Optionen, um Ihre Bilder in Breite und Höhe, oder es wird abgeschnitten oder haben weiße Raum, abhängig von der Größe der Schaltfläche und Bild.
```
<style>
  button.button#ok
  {
    width:100px;
    height:100px;
  }
</style>
<button class="button" id="ok"></button>
<script>
  var buttons=document.getElementsByClassName("button");
  for(var b=0;b<buttons.length;b++)
  {
    if(buttons[b].id=="ok")
    {
      buttons[b].style.background="url('images/ok.png')";   
    }
  }
</script>
```
Bearbeiten, Quelle

Hier ist der code in Aktion:

http://js.x10.bz/helpstack/35742199/button.html

Hier ist die Quelle des Codes(das ist oben):

http://js.x10.bz/helpstack/35742199/button.txt

Und hier ist das Bild das ich verwendet habe:

http://js.x10.bz/helpstack/35742199/cookies.jpg

InformationsquelleAutor James Karlton Stone

**TRY THIS**

<!DOCTYPE html>
<html lang="en"><head>
</head><body>
  <button class="button" id="Ok"></button>
<script>
var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
      buttons[b].innerHTML = "<img src=\"ok/png\"/>";   
  }
</script>
</body></html>

Bitte Laden Sie Body-Tag Zuerst, Dann Laden Sie Ihre Script-Tag.
Hallo, dies ist zunächst das hinzufügen des Bildes durch die html <img src="images/ok.png"> weil diese buttons[b].firstChild.src = "images/ok1.png"; funktioniert nicht.

InformationsquelleAutor baj9032

1

Versuchen Sie dies:
```
buttons[b].firstChild.src= "images\ok.png";
```
Hi @Ankit Bhanderi, Rayon Dabre auch vorgeschlagen hast, aber das gibt mir einen Fehler aus: TypeError: Cannot set property 'src' null.

InformationsquelleAutor baj9032

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bearbeiten, Quelle