JavaScriptコードでクリックイベント処理をデバッグする方法は？

Question

<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を初めて使用しています。特定のボタン/画像をクリックすると画像を変更することになっています。

しかし、それは動作しません。

Answer 1

あなたはおそらくこれをしたい：

<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> 

Answer 2

私は「スライド画像二」ボタンをクリックしたときに「SlideTwo」に「SlideOne」画像を変更したいです。