Member Avatar for efth

I have it set up so that onclick (on a picure) calls the following function:

function nxtimg(country){
    document.getElementById("imgcont").src="images",country,"/",imgs[i],".jpg";
    i++;
}

When I click on the image however, accorfing to firebug, the src of the image is; "images". It should have been changed to something like:
"images/a/flag".
Where did I mess up?

  • 5 Contributors
  • 8 Replies
  • 279 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by theHop

Dani AI

Generated

The reason you saw the src become just "images" is the comma usage. In JavaScript the comma operator doesn’t join strings — in your expression the assignment happens first and the remaining comma-separated parts are evaluated and ignored. In short, "images", country, "/", imgs[i], ".jpg" does not build a path. As hinted, you need to build a single string (for example with concatenation or a template literal). Also check the element id (there’s been an imgcont vs imgcou typo in replies) and whether imgs and i are valid — if i isn’t declared outside the function you’ll keep losing its value, which is what and pointed out.

A robust pattern that avoids those problems and is safe to debug:

// declare the counter outside the function
let i = 0;

function nxtimg(country) {
  const img = document.getElementById('imgcont');
  if (!img) { console.error('no element with id imgcont'); return; }
  if (!Array.isArray(imgs) || imgs.length === 0) { console.error('imgs not defined or empty'); return; }

  i = (i + 1) % imgs.length;                     // wrap the index safely
  const path = `images/${country}/${imgs[i]}.jpg`;
  console.log('setting image src ->', path);     // helpful for debugging
  img.src = path;
}

Troubleshooting checklist: confirm the onclick actually passes a string (e.g. nxtimg('a')), watch the console for ReferenceError (undefined imgs or i will stop execution), inspect the Network panel for 404s, and remember server file names are case-sensitive. Once those are fixed the image swapping should work reliably.

Recommended Answers

All 8 Replies

Member Avatar for theHop

what are the commas for? plusyou have missed a forward slash on image path. this May work

function nxtimg(country){
  document.getElementById("imgcont").src="images/" + country + "/" + imgs[i] + ".jpg";
  i++;
}
Member Avatar for efth


When I use plusses the function doesn't do anything...
Why's that?

Member Avatar for Troy III

you've most probably lost refference to your counter (i)

Member Avatar for otengkwaku

try this

function nxtimg(contry){
    document.getElementById("imgcou").src = \""images/" +country +"/" + imgs[i] + ".jpg"\";
    i++;
}

but i don't realy understand your code. what is the use of imgs[i].
if the onclick is trigered and the code runs. i will be incread and then the code exit. there must be a way of passing the new value of i but into the code. if i know the meaning of imgs[i] i will be able to help you more.

Member Avatar for EvolutionFallen

try this

The code doesn't need the \", and there's also a typo in getElementById("img**cou**"). The OP originally used *imgcont*.

To the OP: Are you declaring i outside of the function? Otherwise i loses its value every time you exit the function, so it'll always return the same value, and you'll always get the same image. This is pretty much a more verbose way of saying what Troy III mentioned.

Member Avatar for otengkwaku

@ EvolutionFallen so the solution is to declear the i outside the function.
by the way thanks for the typo correction

Member Avatar for EvolutionFallen

@ EvolutionFallen so the solution is to declear the i outside the function.
by the way thanks for the typo correction

Yup! Otherwise once you exit the function's scope, i is unset.

Member Avatar for theHop

Yes. I was assuming it already was declared outside the function somewhere. Probably should've mentioned that :S

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.