Javascript onclick event only work once?

Question

0.00/5 (No votes)

See more:

Hey,

I'm working on a web page that shows image with a column of smaller images below that can be clicked so it can show as a big picture above. I was able to make it work with onclick event handler for javascript but after the image changes, when I clicked another image it just stopped from changing. Anyone know why? I'm guessing that it's a limitation of onclick event.

Here's my code block:

HTML

HTML

<img class="slasher" src="../img/Slash.jpg" height="800" width="1100">

<div class="row">
<img  class="slide1ID" src="../img/slide1.jpg" height="300px" width="385px"  önclick="changeImage()"/>
<img  class="slide2ID" src="../img/slide2.jpg" height="300px" width="385px"  önclick="changeImage()"/>
<img  class="slide3ID" src="../img/slide3.jpg" height="300px" width="385px"  önclick="changeImage()"/>
</div>

Javascript

JavaScript

function changeImage(){
    if(document.getElementByClassName("slide1ID")){
        document.getElementByClassName("slasher").src="../img/slide1.jpg";
       } 
    if(document.getElementByClassName("slide2ID")){
        document.getElementByClassName("slasher").src="../img/slide2.jpg";
             
       }

Posted 22-Apr-14 3:42am

KatsuneShinsengumi

Updated 22-Apr-14 3:54am

v3

Add a Solution

Comments

vbmike 22-Apr-14 10:00am

Which picture does it put in the element above? The first one or the last? Your conditional statements are only checking that a particular element with a class exists, not that it was clicked. You should look up "this" keyword and some functional examples online at jquery.com.

thatraja 22-Apr-14 10:04am

Not working on 3rd picture onclick?

Ajith K Gatty 22-Apr-14 13:06pm

Hi,
Its not limitation of onclick event.
It would be nice if you follow solution1. It looks more appropriate.

KatsuneShinsengumi 24-Apr-14 23:48pm

Hi, initially the above picture is the same as the first picture in the list below. when I click any of the pictures below the above picture changes to whichever I click. but after the first click, if i try to click any picture again it wont work anymore.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2014-04-22T05:20:00

You're going about this in a peculiar fashion - using the class name to identify the item clicked. It's more conventional to use an id.

add an id to the image tag something like this:

  <img ....="" id="space1" onclick="changeImage(id)">
</img>

and rearrange your function to something like this:

function changeImage(id) {

  switch(id) {
    case 'space1':  do something
                    break;  
    case 'space2':  do something
                    break;  
    case 'space3':  do something
                    break;  
  } // end switch(id)

} // end function changeImage(id)

You'll find this easier to manage - consider that a class can be used in more than one location (and ideally, your CSS will allow you to do this) - it's not the best way to test for an individual item to be identified. id's on the other hand, are not supposed to be reused on a given page. You can also have a lot of functionality using document.getElementById()