如何在 JavaScript 代码中调试点击事件处理

How to debug click event handling in JavaScript code?

本文关键字：调试 事件处理 代码 JavaScript      更新时间：2023-09-26
    <img id="Slide" src="SlideOne.png"></img>
<img id="SImg" src="Slide Image One.png" onmouseover="this.src='Slide Image Hover One.png';" onmouseout="this.src='Slide Image One.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Two.png" onmouseover="this.src='Slide Image Hover Two.png';" onmouseout="this.src='Slide Image Two.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Three.png" onmouseover="this.src='Slide Image Hover Three.png';" onmouseout="this.src='Slide Image Three.png';" onclick="SlideManager()"></img> 
</center>
<script>
function SlideManager() {
    if(document.getElementById('SImg').src.match("Slide Image One.png"))
    {
        document.getElementById('Slide').src = "SlideOne";
    }
    if(document.getElementById('SImg').src.match("Slide Image Two.png"))
    {
        document.getElementById('Slide').src = "SlideTwo";
    }
    if(document.getElementById('SImg').src.match("Slide Image Two.png"))
    {
        document.getElementById('Slide').src = "SlideTwo";
    }
}
</script>

我是第一次使用JavaScript。当单击特定按钮/图像时，它应该更改图像。

但它不起作用。

您可能希望这样做：

<img id="Slide" src="Slide Image One.png" />
<!-- id has to be unique, cannot use same id for multiple elements -->
<img id="Img1" src="Slide Image One.png" onmouseover="changeImage('Slide Image Hover One.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover One.png')" />
<!-- also <img /> is single-tag element -->
<img id="Img2" src="Slide Image Two.png" onmouseover="changeImage('Slide Image Hover Two.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Two.png')" />
<img id="Img3" src="Slide Image Three.png" onmouseover="changeImage('Slide Image Hover Three.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Three.png')" /> 
</center>
<script>
// use variable to remember current active slide (to be used to return to by mouseout)
var currentSlide = "Slide Image One.png";
// just temporarly change
function changeImage(name) {
    document.getElementById('Slide').src = name;
}
// save new image to currentSlide and change image
function setCurrentSlide(name) {
    currentSlide = name;
    changeImage(currentSlide);
}
</script>
我想在

单击"幻灯片图像二"按钮时将"幻灯片一"图像更改为"幻灯片二"。

相关文章：