Javascript Bug calling functions

Question

So guys, I have to JS files and in head i have this:

<script type="text/javascript" src="./scripts/changeImage.js"></script>
<script type="text/javascript" src="./scripts/changeImageBot.js"></script>

and in body I have this:

<img id="myimage" onclick="changeImage()"src="./images/avatars/1.png"/>
<img id="botimage" onclick="changeImageBot()"src="./images/computer/1.png"/>

So my JS files are ok, if I have bots changeimage and changeimagebot, only 1 of them will work... but if I let only one on page they work perfect..

The problem is if I try to use both on them when page loading.. one of them is working and the other will not work :| if I press on the changeImage() function it change the image from changeImageBot() ... take a look at functions:

    var cb=0;
function changeImageBot(){
if(cb==-1){
  cb=0;
  document.getElementById('botimage').src="./images/computer/1.png";
  } else if (cb==0){
  cb=1;
  document.getElementById('botimage').src="./images/computer/2.png";
  } else if (cb==1){
  cb=2;
  document.getElementById('botimage').src="./images/computer/3.png";
  } blabla on.. 
}

var cc=0;
function changeImage(){
if(cc==-1){
  cc=0;
  document.getElementById('myimage').src="./images/avatars/1.png";
  } else if (cc==0){
  cc=1;
  document.getElementById('myimage').src="./images/avatars/2.png";
  } else if (cc==1){
  cc=2;
  document.getElementById('myimage').src="./images/avatars/3.png";
  } else if (cc==2){
  cc=3;
  document.getElementById('myimage').src="./images/avatars/4.png";
  } blalba so on
}

the functions are in 2 diferent files ..

Shaunak · Accepted Answer · 2013-08-19 15:24:05Z

2

You just need to wait for DOM to get loaded fully. Because you dont seem to be using jQuery, you need to do it the classic JavaScript way. Here is the documentation to get you started .

As a side note: this becomes very easy, if you use jQuery. Please ask if you need help on how to do this using jQuery.

UPDATE: The jQueryWay

First include jQuery on your page.
Remove onClick events from your html.
To both your js files add this code and change the function name:

$(function() {
    $("#myimage").click(function() {
        changeImage();
    });
});

Do this for both yor javascript files and change the imageID and function call accordingly.

'#myimage' is the id of your image that you bind the click callback to. This is doing exactly the same thing that you were, except completly from the javascript code. Also it waits for the dom to be loaded first. This is done by wrapping code in $(); function.

You also mention that you have 140 images. Not sure what you mean exaclty, but if you want to apply came callback function on say 100 images you can do this by adding class = 'someclass' on wach of them. Then your jquery code will look like $('.somclass').click(..) So you dont have to depend on IDs.

edited Aug 19, 2013 at 15:24

answered Aug 19, 2013 at 14:59

Shaunak

18.2k5 gold badges59 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2637946 Over a year ago

so in the first function o have 140 pictures :)) if u can tell me how to make this using jquery it wil be very usefull ...

Collectives™ on Stack Overflow

Javascript Bug calling functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related