How to debug click event handling in JavaScript code?

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>

I am using JavaScript first time. It is supposed to change images when clicked on specific button/image.

But its not working.

Please say exactly what your problem is and where it is occurring so that we can help — Evan Bechtol, May 11 '16 at 20:25
You have multiple elements with the same ID - that's not allowed. — tymeJV, May 11 '16 at 20:27
The new images `"SlideOne"` and `"SlideTwo"` don't have file extensions. What format are these images? `.png`, `.jpg`, `.gif`, etc. In addition the `` tag is self closing, `` is [deprecated](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center), you cannot have multiple elements with the same `id` and there is no mention of PHP within your question so the `[sonic]` tag is not applicable... — War10ck, May 11 '16 at 20:27
You probably have an issue with your src attributes/parameters : JavaScript does not allow you to use space in variable and parameter name. JavaScript Style Guide is a good read if you have to do quick fixes in a snippet: http://www.w3schools.com/js/js_conventions.asp — Romain Willmann, May 11 '16 at 20:34
Use different ID for the image tags. In that case, you don't need to match image src attribute value in the js code snippet you wrote. As war10ck mentioned, give a format type to SlideOne and SlideTwo in the js. In addition to that, image src attribute should be a valid url. Space characters are not allowed in url. You have to encode them. See this post: http://stackoverflow.com/questions/4172579/html-href-syntax-is-it-okay-to-have-space-in-file-name — Saad, May 11 '16 at 20:45

score 0 · Answer 1 · answered May 11 '16 at 20:40

you probably want to do this:

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

score 0 · Answer 2 · answered May 12 '16 at 17:03

0

I want to change the "SlideOne" image to "SlideTwo" when clicked on "Slide Image Two" button.

answered May 12 '16 at 17:03

user220233

1

How to debug click event handling in JavaScript code?

2 Answers2