Làm cách nào để thêm sự kiện .click() vào hình ảnh?

Tôi có một tập lệnh đặt hình ảnh dựa trên một cú nhấp chuột nhờ vào số Jose Faeti. Bây giờ tôi cần trợ giúp thêm sự kiện .click() vào mã bên dưới để khi người dùng nhấp vào hình ảnh, nó thực hiện chức năng được hiển thị trong tập lệnh.Làm cách nào để thêm sự kiện .click() vào hình ảnh?

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

Tôi đặt toàn bộ mã bên dưới, trong trường hợp bạn muốn xem.

<html> 
<head> 
<script language="javascript" type="text/javascript"> 
<!-- 

document.getElementById('foo').addEventListener('click', function (e) { 

var img = document.createElement('img'); 

img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png'); 

e.target.appendChild(img); 
}); 

    // --> 
</script> 

</head> 

<body> 
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click() 
</body> 
</html>

Trợ giúp?

Nguồn

2011-09-10 SS'

Bất kỳ lý do bạn không chỉ sử dụng jQuery? Trong mọi trường hợp, bạn đang tạo một phần tử DOM cho hình ảnh - việc thêm một trình lắng nghe vào đó giống như việc thêm một trình lắng nghe vào bất kỳ phần tử DOM nào khác - mà bạn đã biết cách thực hiện. –

Trước hết, dòng này

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

Bạn đang trộn HTML và JavaScript. Nó không hoạt động như thế. Loại bỏ .click() ở đó.

Nếu bạn đọc JavaScript bạn đã có ở đó, document.getElementById('foo') đang tìm kiếm phần tử HTML có ID là foo. Bạn không có. Cho hình ảnh của bạn mà ID:

<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />

Ngoài ra, bạn có thể ném JS trong một hàm và đặt một onclick trong HTML của bạn:

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />

tôi đề nghị bạn làm một số đọc lên trên JavaScript và HTML dù .

Những người khác cũng cần phải di chuyển <img> phía trên ràng buộc nhấp chuột JS.

Nguồn

2011-09-10 20:49:35 mpen

Bạn không thể ràng buộc một sự kiện để các phần tử trước khi nó tồn tại, vì vậy bạn nên làm điều đó trong trường hợp onload:

<html> 
<head> 
<script type="text/javascript"> 

window.onload = function() { 

    document.getElementById('foo').addEventListener('click', function (e) { 
    var img = document.createElement('img'); 
    img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png'); 
    e.target.appendChild(img); 
    }); 

}; 

</script> 
</head> 
<body> 
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" /> 
</body> 
</html>

Nguồn

2011-09-10 20:50:00 Guffa

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" > 
function openOnImageClick() 
{ 
//alert("Jai Sh Raam"); 
// document.getElementById("images").src = "fruits.jpg"; 
var img = document.createElement('img'); 
img.setAttribute('src', 'tiger.jpg'); 
    img.setAttribute('width', '200'); 
    img.setAttribute('height', '150'); 
    document.getElementById("images").appendChild(img); 


} 


</script> 
</head> 
<body> 

<h1>Screen Shot View</h1> 
<p>Click the Tiger to display the Image</p> 

<div id="images" > 
</div> 

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" /> 
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" /> 

</body> 
</html>

Nguồn

2014-02-15 12:34:29 Arun

Làm cách nào để thêm sự kiện .click() vào hình ảnh?

Trả lời

Các vấn đề liên quan