Lập trình thay đổi src của thẻ img

Làm cách nào để thay đổi srcthuộc tính của imgthẻ bằng javascript?

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

Lúc đầu, tôi có một src mặc định là "../template/edit.png" và tôi muốn thay đổi nó bằng "../template/save.png" onclick.

CẬP NHẬT: đây là html onclick của tôi:

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

và JS của tôi

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

Tôi đã thử chèn cái này vào bên trong chỉnh sửa (), nó hoạt động nhưng cần phải nhấp vào hình ảnh hai lần

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

Cung cấp cho thẻ img của bạn một id, sau đó bạn có thể

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

Bạn có thể sử dụng cả phương pháp jquery và javascript: nếu bạn có hai hình ảnh chẳng hạn:

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

1) Phương pháp Jquery->

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

2) Phương pháp Javascript->

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

Đối với loại vấn đề này, jquery là cách đơn giản để sử dụng.

nếu bạn sử dụng thư viện JQuery, hãy sử dụng hướng dẫn này:

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

bây giờ ổn rồi

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

Trong trường hợp này, khi bạn muốn thay đổi srcgiá trị đầu tiên của phần tử, bạn không cần phải xây dựng hàm. Bạn có thể thay đổi quyền này trong phần tử:

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

Bạn có một số cách để làm điều này. Bạn cũng có thể tạo một chức năng để tự động hóa quy trình:

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

Sau đó bạn có thể:

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

Với đoạn trích bạn cung cấp (và không đưa ra giả định về cha mẹ của phần tử), bạn có thể có được một tham chiếu đến hình ảnh với

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

và thay đổi src với

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

để bạn có thể đạt được hiệu quả mong muốn với

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

mặt khác, như được đề xuất khác, nếu bạn đang kiểm soát mã, tốt hơn là gán một idhình ảnh cho một tham chiếu getElementById(vì đó là phương pháp nhanh nhất để truy xuất một phần tử)

Cung cấp cho hình ảnh của bạn một id. Sau đó, bạn có thể làm điều này trong javascript của bạn.

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

Bạn có thể sử dụng phương thức ".___" để thay đổi giá trị của bất kỳ thuộc tính nào của bất kỳ thành phần nào.

Có thể bởi vì bạn có một thẻ giống như cha mẹ của thẻ. Đó là lý do tại sao bạn phải bấm hai lần hình ảnh.

Đối với tôi, giải pháp là đây: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb