请帮忙， 我不明白出了什么问题。当我点击图像时什么也没有发生。 onclick="collectImageId(this.id) 似乎不起作用。我根据我的知识检查了所有内容，但找不到丢失的内容！有人可以帮助我找到错误吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collect Image IDs on Click</title>
<script>
// Global variable to store the last clicked image ID
var lastClickedImageId = "";
// Function to collect and store the image ID when clicked
function collectImageId(imageId) {
lastClickedImageId = imageId; // Save the clicked image ID
console.log("Last clicked image ID:", lastClickedImageId);
}
</script>
</head>
<body>
<!-- Image 1 -->
<img id="image1" src="image1.jpg" alt="Image 1" onclick="collectImageId(this.id)">
<!-- Image 2 -->
<img id="image2" src="image2.jpg" alt="Image 2" onclick="collectImageId(this.id)">
<!-- Image 3 -->
<img id="image3" src="image3.jpg" alt="Image 3" onclick="collectImageId(this.id)">
<!-- Display last clicked image ID -->
<p>Last clicked image ID: <span id="lastClickedIdDisplay"></span></p>
<script>
// Function to update the display of last clicked image ID
function updateLastClickedIdDisplay() {
document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId;
}
// Add event listeners to update the display when the global variable changes
Object.defineProperty(window, 'lastClickedImageId', {
set: function(value) {
lastClickedImageId = value;
updateLastClickedIdDisplay();
},
get: function() {
return lastClickedImageId;
}
});
</script>
</body>
</html>`
我试图找出问题所在。但找不到问题所在，为什么代码不起作用？为什么点击图像后什么也没有发生？ --- 我希望代码能够顺利运行并在每次单击时收集图像 id 属性。
您可能想简化您的代码。
您可以在同一功能上显示点击图像的id。
我稍微改变了你的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collect Image IDs on Click</title>
</head>
<body>
<!-- Image 1 -->
<img id="image1" src="image1.jpg" alt="Image 1" onclick="collectImageId(this.id)">
<!-- Image 2 -->
<img id="image2" src="image2.jpg" alt="Image 2" onclick="collectImageId(this.id)">
<!-- Image 3 -->
<img id="image3" src="image3.jpg" alt="Image 3" onclick="collectImageId(this.id)">
<!-- Display last clicked image ID -->
<p>Last clicked image ID: <span id="lastClickedIdDisplay"></span></p>
<script>
// Global variable to store the last clicked image ID
var lastClickedImageId = "";
// Function to collect and store the image ID when clicked
function collectImageId(imageId) {
lastClickedImageId = imageId; // Save the clicked image ID
console.log("Last clicked image ID:", lastClickedImageId);
document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId;
}
</script>
</body>
</html>请注意，我将您的函数转移到底部脚本标记，因为 JS 大部分放置在那里而不是放在头部（即 CSS）。