Programowo zmień src znacznika img

Jak mogę zmienić srcatrybut imgznacznika za pomocą javascript?

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

na początku mam domyślny plik src, którym jest „../template/edit.png” i chciałem go zmienić za pomocą „../template/save.png” po kliknięciu.

ZAKTUALIZOWANO: oto mój html onclick:

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

i mój JS

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

Próbowałem wstawić to w edit (), działa, ale muszę dwukrotnie kliknąć obraz

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

Daj swojemu tagowi img identyfikator, wtedy możesz

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

Możesz użyć zarówno metody jquery, jak i javascript: jeśli masz na przykład dwa obrazy:

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

1) Metoda Jquery->

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

2) Metoda Javascript->

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

W przypadku tego typu problemów jquery jest proste w użyciu.

jeśli korzystasz z biblioteki JQuery, skorzystaj z tej instrukcji:

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

teraz jest 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'" />

W takim przypadku, gdy chcesz zmienić srcpierwszą wartość swojego elementu, nie musisz budować funkcji. Możesz zmienić to prawo w elemencie:

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

Masz na to kilka sposobów. Możesz także utworzyć funkcję automatyzującą proces:

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

Następnie możesz:

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

Za pomocą dostarczonego fragmentu kodu (bez zakładania rodziców elementu) można uzyskać odniesienie do obrazu za pomocą

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

i zmień src za pomocą

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

dzięki czemu można osiągnąć pożądany efekt

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

w przeciwnym razie, jak sugerują inni, jeśli masz kontrolę nad kodem, lepiej jest przypisać iddo obrazu referencję getElementById(ponieważ jest to najszybsza metoda pobrania elementu)

Nadaj swojemu zdjęciu identyfikator. Następnie możesz to zrobić w swoim javascript.

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

Możesz użyć metody „.___”, aby zmienić wartość dowolnego atrybutu dowolnego elementu.

Może dlatego, że masz tag podobny do jego rodzica. Dlatego musisz kliknąć dwa razy obrazy.

Dla mnie rozwiązanie jest następujące: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb