Secara terprogram, ubah src dari tag img

242

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";
    }
javascript html image src Jam Ville
sumber

Jawaban:

307

Berikan id tag id Anda, maka Anda bisa

document.getElementById("imageid").src="../template/save.png";
Matthias
sumber
16
Untuk hal-hal sederhana seperti mengatur nilai input atau mengubah src gambar ( terutama ketika Anda menggunakan elemen yang memiliki ID), Anda benar-benar harus mencoba menghindari jQuery, karena panggilan jauh lebih lambat daripada panggilan JS murni
Brian Leishman
2
@ william44isme dan halaman kami akan dimuat lebih lambat dari sebelumnya. Saya pikir jQuery berguna hanya untuk situs web yang menggunakan kode yang sama, sangat banyak. misalnya jika kita menggunakan kode di atas lebih dari 30 atau 50 kali. jadi perlu menggunakan jQuery
Mahdi Jazini
62

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.

Chandanjha
sumber
21
Poster tidak pernah menunjukkan minat pada solusi jQuery. Metode jQuery juga tidak lebih sederhana. Jangan menjawab pertanyaan JS dengan solusi jQuery (kecuali posting menunjukkan mereka menginginkannya). Itu hanya membingungkan orang yang mencoba belajar JS.
metaColin
6
getElementByClassName mengembalikan koleksi semua elemen. Kita perlu menyebutkan indeks elemen juga. var image = document.getElementsByClassName ("image2") [0]; image.src = "image1.jpg"
Tushar Gaurav
34

jika Anda menggunakan perpustakaan JQuery gunakan instruksi ini:

$("#imageID").attr('src', 'srcImage.jpg');
Alessandro Pirovano
sumber
24
Pertanyaannya tidak meminta jawaban jQuery, termasuk tag jQuery, atau menyarankan bahwa boleh saja menggunakan jQuery.
Popnoodles
10
Memberitahu orang untuk menggunakan jQuery ketika fungsi yang setara dibangun langsung ke Javascript tidak masuk akal. Setiap pertanyaan JS tidak memerlukan jawaban jQuery. Solusi ini adalah kludge yang mencegah orang belajar tentang apa yang sudah bisa dilakukan oleh vanilla JS.
metaColin
27

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";                              
}
Jam Ville
sumber
8 
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
Donatas Olsevičius
sumber
Inline JS bukan ide yang bagus.
FluorescentGreen5
7

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>
Marcelo Camargo
sumber
6

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)

Fabrizio Calderan
sumber
6

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.

Ben
sumber