Hướng dẫn click button change image javascript - nhấp vào nút thay đổi hình ảnh javascript

Điều này có vẻ như nó nên hoạt động nhưng không. Tôi không chắc vấn đề đang ở đâu - hoặc tôi đang làm sai, hoặc có thể tôi có lỗi cú pháp. Tôi chỉ không làm gì cả. Tôi đang cố gắng để hình ảnh hiện tại thay đổi khi nhấp vào nút. Tôi là người mới bắt đầu tại JavaScript, vì vậy hãy nhẹ nhàng;) Cảm ơn bạn!

Đã hỏi ngày 26 tháng 10 năm 2013 lúc 17:01Oct 26, 2013 at 17:01

1

Bạn đã bỏ lỡ các trích dẫn trong .getElementById('theImage')

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

Đã trả lời ngày 26 tháng 10 năm 2013 lúc 17:08Oct 26, 2013 at 17:08

RoarroarRoar

2.1074 huy hiệu vàng24 Huy hiệu bạc37 Huy hiệu đồng4 gold badges24 silver badges37 bronze badges

Thêm " vào đối số getElementById và xóa ) ở cuối dòng:

http://jsfiddle.net/cdd8j/ - tại đây. Nó hoạt động.

theImage chỉ là ID của yếu tố, không phải là biến, vì vậy bạn phải đặt nó vào báo giá.

Đã trả lời ngày 26 tháng 10 năm 2013 lúc 17:08Oct 26, 2013 at 17:08

RoarroarCrazy Yoghurt

2.1074 huy hiệu vàng24 Huy hiệu bạc37 Huy hiệu đồng2 gold badges27 silver badges37 bronze badges

Thêm " vào đối số getElementById và xóa ) ở cuối dòng:

theButton.onclick = function pictureChange()
{
   document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
}

http://jsfiddle.net/cdd8j/ - tại đây. Nó hoạt động.

theImage chỉ là ID của yếu tố, không phải là biến, vì vậy bạn phải đặt nó vào báo giá.Oct 26, 2013 at 17:13

Yoghurtcrazy sữa chua điên rồMd Ashaduzzaman

2.3252 huy hiệu vàng27 Huy hiệu bạc37 Huy hiệu đồng2 gold badges17 silver badges33 bronze badges

0

Có rất nhiều cách bạn có thể thử. Đặt chức năng bằng các thuộc tính nội tuyến hoặc gọi nó bằng ID trong tập lệnh của bạn.:

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

0 works best.

Thử nghiệmNov 19, 2016 at 13:33

Làm thế nào để thay đổi nguồn hình ảnh bằng JavaScript?

---

Trong trường hợp chúng tôi muốn thay đổi hình ảnh trong JavaScript, chúng tôi có thể làm theo cách tiếp cận này.

Changing the Image
    
myImage" width="100" height="150">
    
    
Click on the "Change" button to convert waterbottle

        into Softdrink bottle

    

Trong đoạn mã trên, & nbsp; getEuityById tìm thấy hình ảnh với ID ID MyImage và thay đổi hình ảnh bằng mỗi lần nhấp vào nút "Thay đổi". Trong mã

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

1 & nbsp; Thuộc tính

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

2 được sử dụng trong các thử nghiệm

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

3 này nếu

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

4 chứa chuỗi "colorbottel". Nếu có trận đấu,

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

3 thay đổi

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

6 "Waterbottel".getElementById finds a image with id “myImage” and changes the image by each click on "Change" button. In the

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

1 code 

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

2 attribute is used in this

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

3 tests if

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

4 contains the string "colorbottel". If there is match,

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

3 changes

 function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh2p8o1_500.png";
    }

6 "waterbottel".

Đầu ra

Onclick của nút "Thay đổi" trong đầu ra ở trên sẽ thay đổi nút chai nước thành chai SoftDrink, có thể được hiển thị trong hình ảnh dưới đây.

& nbsp; Lượt xem: 91587 | Đơn đặt hàng bài: 60

---

---

Bài viết liên quan

Làm cách nào để thay đổi hình ảnh bằng JavaScript?

Làm cách nào để thay đổi hình ảnh onclick của tôi trong HTML?

Làm thế nào để bạn thay đổi một hình ảnh trong HTML?

Bạn có thể làm một onclick trên một hình ảnh?