Javascript 如何在单击该图像的 onclick 事件上获取图像源路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10270937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Image source path on onclick event of that Image clicked
提问by user1253847
I need to get the Image source when onclick event of the image is fired .
当图像的 onclick 事件被触发时，我需要获取图像源。
I tried using document.getElementById("example").src; , but the console on browser says
我尝试使用 document.getElementById("example").src; ，但浏览器上的控制台说
Uncaught TypeError: Cannot read property 'src' of null
未捕获的类型错误：无法读取 null 的属性“src”
<html>
<head>
<script type="text/javascript">
function changeIt()
{
var name = document.getElementById("myimage").src;
alert(name);
}
</script>
</head>
<body>
<img onclick="changeIt()" src='em1.gif' name='example' border='0' />
<img onclick="changeIt()" src='em2.gif' name='example' border='0' />
<img onclick="changeIt()" src='em3.gif' name='example' border='0' />
<img onclick="changeIt()" src='em4.gif' name='example' border='0' />
<img onclick="changeIt()" src='em5.gif' name='example' border='0' />
</body>
</html>
Update part .
更新部分。
The actual source is , on a AJAX Response , i will get Image Paths from a folder , for which i need to create Images dynamically and add them to a div .
实际来源是，在 AJAX 响应上，我将从文件夹中获取图像路径，为此我需要动态创建图像并将它们添加到 div。
This is actual code
这是实际代码
outputdata.forEach(function (element) {
content = $("<div><a href='something'><img onclick='changeIt()' src='" + element + "' /></a></div>");
content.addClass('content');
container.append(content);
$("#fp_thumbScroller").append(container);
});
}
so i didn't created ID , thinking as it is not suitable to have same id's for different images .
所以我没有创建 ID，认为不同的图像不适合使用相同的 ID。
回答by mgraph
html:
html：
<img onclick="changeIt(this.src)" src='em1.gif' name='example' border='0' />
js:
js：
function changeIt(_src){
alert(_src);
}?
回答by TJ.
I would pass the actual element reference (this) as a parameter so you can change the image source or whatever it is you would like to change.
我会将实际的元素引用 (this) 作为参数传递，以便您可以更改图像源或您想要更改的任何内容。
HTML:
HTML：
<img onclick="changeIt(this)" src='em3.gif' name='example' border='0' />
Javascript (make sure it's in the area):
Javascript（确保它在该区域内）：
function changeIt(img)
{
var name = img.src;
alert(name);
}
Here's a fiddle.
这是一个小提琴。
回答by Vikas Gulati
have you got any img tag in your html with id "myimage"? you must make sure that there is an img element with id "myimage" before referencing it!
你的 html 中是否有任何 img 标签，id 为“myimage”？在引用它之前，您必须确保有一个 ID 为“myimage”的 img 元素！
回答by JRaymond
That's because none of your images have an ID:
那是因为您的所有图像都没有 ID：
<img id="myImage" onclick="changeIt()" src='em1.gif' name='example' border='0' />
