Programmatisch de src van een img-tag wijzigen

Hoe kan ik het src-kenmerk van een img-tag wijzigen met javascript?

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

in eerste instantie heb ik een standaard src die “../template/edit.png” is en ik wilde deze wijzigen met “../template/save.png” op klik.

GE-UPDATE:
hier is mijn html onclick:

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

en mijn JS

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

Ik heb geprobeerd dit in de edit() in te voegen, het werkt maar ik moet twee keer op de afbeelding klikken

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

Antwoord 1, autoriteit 100%

Geef je img-tag een id, dan kun je

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

Antwoord 2, autoriteit 21%

U kunt zowel de jQuery- als de javascript-methode gebruiken:
als je bijvoorbeeld twee afbeeldingen hebt:

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

1)Jquery-methode->

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

2)Javascript-methode->

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

Voor dit soort problemen is jQuery het eenvoudigst te gebruiken.

Antwoord 3, autoriteit 11%

als u de JQuery-bibliotheek gebruikt, gebruikt u deze instructie:

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

Antwoord 4, autoriteit 9%

het is nu 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";                              
}

Antwoord 5, autoriteit 3%

Geef je afbeelding een id. Dan kun je dit in je javascript doen.

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

U kunt deze syntaxis gebruiken om de waarde van elk attribuut van elk element te wijzigen.

Antwoord 6, autoriteit 2%

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

Antwoord 7, autoriteit 2%

Met het door u verstrekte fragment (en zonder aannames te doen over de bovenliggende elementen van het element) zou u een verwijzing naar de afbeelding kunnen krijgen met

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

en verander de src met

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

zodat u het gewenste effect kunt bereiken met

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

anders, zoals anderen hebben gesuggereerd, is het beter om een idaan de afbeelding toe te wijzen en een verwijzing te krijgen met getElementById(aangezien het is de snelste methode om een element op te halen)

Antwoord 8, autoriteit 2%

In dit geval, aangezien u de srcvan de eerste waarde van uw element wilt wijzigen, hoeft u geen functie op te bouwen. U kunt dit recht wijzigen in het element:

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

Je kunt dit op verschillende manieren doen. U kunt ook een functie maken om het proces te automatiseren:

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

Dan kun je:

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

Antwoord 9

Misschien omdat je een tag hebt zoals een ouder van de tag.
Daarom moet je twee keer op de afbeeldingen klikken.

Voor mij is de oplossing dit:
http://www.w3schools.com/js/tryit.asp?filename= tryjs_intro_lightbulb