Ändern Sie programmgesteuert die src eines img-Tags

Wie kann ich das srcAttribut eines imgTags mit Javascript ändern ?

<img src="../template/edit.png" name=edit-save/>

Zuerst habe ich einen Standard-Quellcode, der "../template/edit.png" ist, und ich wollte ihn mit "../template/save.png" onclick ändern.

AKTUALISIERT: Hier ist mein HTML-Klick:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

und mein JS

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

Ich habe versucht, dies in edit () einzufügen, es funktioniert, aber ich muss zweimal auf das Bild klicken

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }

Geben Sie Ihrem img-Tag eine ID, dann können Sie

document.getElementById("imageid").src="../template/save.png";

Sie können sowohl die jquery- als auch die javascript-Methode verwenden: Wenn Sie beispielsweise zwei Bilder haben:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1) Abfragemethode->

$(".image2").attr("src","image1.jpg");

2) Javascript-Methode->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

Für diese Art von Problem ist jquery einfach zu verwenden.

Wenn Sie die JQuery-Bibliothek verwenden, verwenden Sie diese Anweisung:

$("#imageID").attr('src', 'srcImage.jpg');

jetzt ist es ok

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}

<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />

In diesem Fall müssen Sie srckeine Funktion aufbauen , da Sie den ersten Wert Ihres Elements ändern möchten . Sie können dieses Recht im Element ändern:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Sie haben mehrere Möglichkeiten, dies zu tun. Sie können auch eine Funktion erstellen, um den Prozess zu automatisieren:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */
  p.firstChild.src = t
}

Dann kannst du:

<a href='#' onclick='changeSrc(this, "../template/save.png");'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Mit dem von Ihnen bereitgestellten Snippet (und ohne Annahmen über die Eltern des Elements zu treffen) können Sie einen Verweis auf das Bild mit erhalten

document.querySelector('img[name="edit-save"]');

und ändern Sie die src mit

document.querySelector('img[name="edit-save"]').src = "..."

So können Sie mit den gewünschten Effekt erzielen

var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
    this.src = "..." // this is the reference to the image itself
};

Andernfalls ist es, wie von anderen vorgeschlagen, besser, iddem Bild eine zuzuweisen, mit der Sie eine Referenz erhalten , wenn Sie die Kontrolle über den Code haben getElementById(da dies die schnellste Methode zum Abrufen eines Elements ist).

Geben Sie Ihrem Bild eine ID. Dann können Sie dies in Ihrem Javascript tun.

document.getElementById("blaah").src="blaah";

Mit der Methode ".___" können Sie den Wert eines beliebigen Attributs eines Elements ändern.

Vielleicht, weil Sie ein Tag wie ein Elternteil des Tags haben. Deshalb müssen Sie zweimal auf die Bilder klicken.

Für mich lautet die Lösung wie folgt: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb