Secara terprogram, ubah src dari tag img

Bagaimana saya bisa mengubah srcatribut imgtag menggunakan javascript?

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

pada awalnya saya memiliki src default yaitu "../template/edit.png" dan saya ingin mengubahnya dengan "../template/save.png" pada klik.

DIPERBARUI: inilah html saya klik:

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

dan JS saya

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

Saya sudah mencoba memasukkan ini ke dalam edit (), itu berfungsi tetapi perlu mengklik gambar dua kali

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

Berikan id tag id Anda, maka Anda bisa

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

Anda dapat menggunakan metode jquery dan javascript: jika Anda memiliki dua gambar misalnya:

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

1) Metode Jquery->

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

2) Metode Javascript->

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

Untuk jenis masalah ini jquery adalah yang paling sederhana untuk digunakan.

jika Anda menggunakan perpustakaan JQuery gunakan instruksi ini:

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

sudah baik sekarang

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

Dalam hal ini, karena Anda ingin mengubah srcnilai pertama elemen Anda, Anda tidak perlu membangun fungsi. Anda dapat mengubah ini di elemen:

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

Anda memiliki beberapa cara untuk melakukan ini. Anda juga dapat membuat fungsi untuk mengotomatiskan proses:

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

Maka kamu bisa:

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

Dengan cuplikan yang Anda berikan (dan tanpa membuat asumsi tentang orang tua elemen) Anda bisa mendapatkan referensi ke gambar dengan

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

dan ganti src dengan

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

sehingga Anda dapat mencapai efek yang diinginkan dengan

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

jika tidak, seperti yang disarankan lainnya, jika Anda mengendalikan kode, lebih baik untuk menetapkan sebuah idgambar dengan referensi getElementById(karena itu adalah metode tercepat untuk mengambil elemen)

Beri id Anda gambar Anda. Maka Anda dapat melakukan ini di javascript Anda.

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

Anda dapat menggunakan metode ".___" untuk mengubah nilai atribut apa pun dari elemen apa pun.

Mungkin karena Anda memiliki tag seperti induk dari tag. Itu sebabnya Anda harus mengklik dua kali gambar.

Bagi saya solusinya adalah ini: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb