[英]Add onclick event to an HMTL element (img) with JavaScript
I have a js function wich create an img tag and append It to a div tag:我有一个 js 函数,它创建一个 img 标签并将其附加到一个 div 标签:
function createImg() {
let image = document.createElement("img");
image.src = "random.png";
document.querySelector("div").appendChild(image);
I want to add to this img an onclick event, so that when I click on It another function will runs, How can I do?我想在这个 img 中添加一个 onclick 事件,这样当我点击它时,另一个函数会运行,我该怎么办? I alredy searched something on stack and found .addEventListener() & .onclick() but both seem to don't work..我已经在堆栈上搜索了一些东西,发现 .addEventListener() 和 .onclick() 但两者似乎都不起作用..
You can add the event listener to the image like:您可以将事件侦听器添加到图像中,例如:
image.addEventListener('click', function(){
// do something
})
var x = 0; function createImg() { let image = document.createElement("img"); image.src = `random${x}.png`; image.addEventListener('click', function() { console.log(this.src) }) x++; document.querySelector("div").appendChild(image); }
<div></div> <button onclick="createImg()"> button </button>
Add id attribute first先添加id属性
image.id = "imgDemo";
Then after appending add the event listener like below:然后在追加后添加事件侦听器,如下所示:
document.getElementById("imgDemo").addEventListener('click', function() {
//function call here
}, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.