Modifier par programme le src d'une balise img

Comment puis-je changer l' srcattribut d'une imgbalise en utilisant javascript?

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

au début, j'ai un src par défaut qui est "../template/edit.png" et je voulais le changer avec "../template/save.png" onclick.

MISE À JOUR: voici mon onclick html:

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

et mon JS

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

J'ai essayé d'insérer cela dans edit (), cela fonctionne mais je dois cliquer deux fois sur l'image

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

Donnez un identifiant à votre balise img, vous pourrez

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

Vous pouvez utiliser à la fois la méthode jquery et javascript: si vous avez deux images par exemple:

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

1) Méthode Jquery->

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

2) Méthode Javascript->

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

Pour ce type de problème, jquery est le plus simple à utiliser.

si vous utilisez la bibliothèque JQuery, utilisez cette instruction:

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

c'est bon maintenant

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

Dans ce cas, comme vous voulez changer la srcpremière valeur de votre élément, vous n'avez pas besoin de construire une fonction. Vous pouvez modifier ce droit dans l'élément:

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

Vous avez plusieurs façons de procéder. Vous pouvez également créer une fonction pour automatiser le processus:

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

Ensuite vous pouvez:

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

Avec l'extrait de code que vous avez fourni (et sans faire d'hypothèses sur les parents de l'élément), vous pouvez obtenir une référence à l'image avec

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

et changer le src avec

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

afin que vous puissiez obtenir l'effet souhaité avec

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

sinon, comme d'autres l'ont suggéré, si vous contrôlez le code, il est préférable d'affecter un idà l'image avec une référence getElementById(car c'est la méthode la plus rapide pour récupérer un élément)

Donnez un identifiant à votre image. Ensuite, vous pouvez le faire dans votre javascript.

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

Vous pouvez utiliser la méthode ".___" pour modifier la valeur de n'importe quel attribut d'un élément.

Peut-être parce que vous avez un tag comme un parent du tag. C'est pourquoi vous devez cliquer deux fois sur les images.

Pour moi, la solution est la suivante: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb