Modifica a livello di codice l'src di un tag img

Come posso cambiare l' srcattributo di un imgtag usando javascript?

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

all'inizio ho uno src predefinito che è "../template/edit.png" e volevo cambiarlo con "../template/save.png" onclick.

AGGIORNATO: ecco il mio html onclick:

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

e il mio JS

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

Ho provato a inserirlo all'interno di edit (), funziona ma è necessario fare doppio clic sull'immagine

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

Dai un ID al tuo tag img, quindi puoi farlo

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

Puoi usare sia il metodo jquery che il metodo javascript: se hai due immagini per esempio:

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

1) Metodo Jquery->

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

2) Metodo Javascript->

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

Per questo tipo di problema jquery è quello semplice da usare.

se usi la libreria JQuery usa queste istruzioni:

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

è a posto adesso

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 questo caso, poiché desideri modificare il srcprimo valore del tuo elemento, non è necessario creare una funzione. Puoi modificare questo diritto nell'elemento:

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

Hai diversi modi per farlo. Puoi anche creare una funzione per automatizzare il processo:

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

Allora puoi:

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

Con lo snippet che hai fornito (e senza fare ipotesi sui genitori dell'elemento) potresti ottenere un riferimento all'immagine con

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

e cambia l'src con

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

in modo da poter ottenere l'effetto desiderato con

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

altrimenti, come altri hanno suggerito, se hai il controllo del codice, è meglio assegnare idun'immagine all'immagine e ottenere un riferimento getElementById(poiché è il metodo più veloce per recuperare un elemento)

Dai alla tua immagine un ID. Quindi puoi farlo nel tuo javascript.

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

È possibile utilizzare il metodo ".___" per modificare il valore di qualsiasi attributo di qualsiasi elemento.

Forse perché hai un tag come un genitore del tag. Ecco perché devi fare clic due volte sulle immagini.

Per me la soluzione è questa: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb