Use if statements with a number variable in JS

Question

I am working on a gallery. So basically my idea works like this: The value of my variable picnumber is 1. If you click on the next button it will trigger my function nextpicture, and of course if you click on the previous button it will trigger my function previouspicture.

So what is the job of those functions?

nextpicture = picnumber + 1
previouspicture = picnumber + 1

Ok, so for example we have clicked on nextpicture once the value of picnumber should be 2 (if the value is 2 it should show 002.jpg)

I want to achieve that it shows a different picture on whether the value of picnumber is 1 - 6

I tried to do this with if and else if statements, however it didn't work.

var picnumber = 1;
function nextpicture(picnumber){
picnumber = picnumber + 1
}
function previouspicture(picnumber){
picnumber = picnumber - 1
}
if (picnumber == 1){
document.getElementById('gallerypicture').src = "img/gallery/001.jpg";
document.getElementById('galleryprevious').style.display = 'none';
}
else if (picnumber == 2){
document.getElementById('gallerypicture').src = "img/gallery/002.jpg";
}
else if (picnumber == 3){
document.getElementById('gallerypicture').src = "img/gallery/003.jpg";
}
else if (picnumber == 4){
document.getElementById('gallerypicture').src = "img/gallery/004.jpg";
}
else if (picnumber == 5){
document.getElementById('gallerypicture').src = "img/gallery/005.jpg";
}
else if (picnumber == 6){
document.getElementById('gallerypicture').src = "img/gallery/006.jpg";
document.getElementById('gallerynext').style.display = 'none';
}
else {  
document.getElementById('gallery').style.display = 'none';
}

Here's my HTML

<img id="gallerypicture" src="" alt="Photo">
<a href="javascript:void(0)" onclick="previouspicture(picnumber);"><div id="galleryprevious"></div></a>
<a href="javascript:void(0)" onclick="nextpicture(picnumber);"><div id="gallerynext"></div></a>

As you can see in my first and in my last if statement, I'd like to hide the div to click previous or next, so the value of picnumber can't be lower than 1 or higher than 6 (since I only have 6 pictures in this gallery)

your if statements will not be re-executed when you change picnumber value. you have to wrap them in an other function and call it in nextpicture and previouspicture after changing picnumber value. Also actually the global picnumber variable is not updated at all as you hide it with picnumber parameter of prev/next function — Hacketo
– Hacketo, Commented Jul 30, 2015 at 13:14
Those if statments do not magically get rerun when the variable is updated. Put it in a function and call it after you update the number. — epascarello
– epascarello, Commented Jul 30, 2015 at 13:14
There is no reason for all the repeated code: var i = 1; var num = ("00" + i).substr(-3); console.log(num); — epascarello
– epascarello, Commented Jul 30, 2015 at 13:23

Community · Accepted Answer · 2017-05-23 12:06:10Z

1

You are only running the if statements that set the image source once. You would need to run them after each change to the picnumber variable.

You can put them in a function, so that you can run them from each function that changes the variable, and also run it to set the initial image:

var picnumber = 1;
setImage();

function nextpicture(){
  picnumber = picnumber + 1
  setImage();
}

function previouspicture(){
  picnumber = picnumber - 1
  setImage();
}

function setImage() {
  if (picnumber == 1){
    document.getElementById('gallerypicture').src = "img/gallery/001.jpg";
    document.getElementById('galleryprevious').style.display = 'none';
  } else if (picnumber == 2){
    document.getElementById('gallerypicture').src = "img/gallery/002.jpg";
  } else if (picnumber == 3){
    document.getElementById('gallerypicture').src = "img/gallery/003.jpg";
  } else if (picnumber == 4){
    document.getElementById('gallerypicture').src = "img/gallery/004.jpg";
  } else if (picnumber == 5){
    document.getElementById('gallerypicture').src = "img/gallery/005.jpg";
  } else if (picnumber == 6){
    document.getElementById('gallerypicture').src = "img/gallery/006.jpg";
    document.getElementById('gallerynext').style.display = 'none';
  } else {  
    document.getElementById('gallery').style.display = 'none';
  }
}

HTML:

<img id="gallerypicture" src="" alt="Photo">
<a href="javascript:void(0)" onclick="previouspicture();"><div id="galleryprevious"></div></a>
<a href="javascript:void(0)" onclick="nextpicture();"><div id="gallerynext"></div></a>

Note: Don't send the picnumber as a parameter to the functions. The parameter will be a local variable inside the function, so you won't change the global variable.

Another note: You are hiding the galleryprevious and gallerynext elements at some points, but there is no code to show them again. I think that you would want to set them as hidden/shown each time. Gershom Maes has some code in his answer that could handle that issue.

You can simplify the code in the function like this (while also making the links reappear):

function setImage() {
  var id = picnumber.toString();
  while (id.length < 3) {
    id = '0' + id;
  }
  document.getElementById('gallerypicture').src = "img/gallery/" + id + ".jpg";

  var prev, next;
  if (picnumber == 1) {
    prev = 'none';
  } else {
    prev = 'block';
  }
  if (picnumber == 6) {
    next = 'none';
  } else {
    next = 'block';
  }
  document.getElementById('galleryprevious').style.display = prev;
  document.getElementById('gallerynext').style.display = next;
}

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 30, 2015 at 13:16

Guffa

703k112 gold badges760 silver badges1k bronze badges

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

13 Comments

Reinstate Monica Cellio Over a year ago

Why not pad picnumber and get rid of all but one of the if statements?

Guffa Over a year ago

@Archer: That's a good idea, but I wanted to keep it closer to the original code.

Hacketo Over a year ago

@Archer I deleted mine because Guffa updated the code of his post

Gershom Maes Over a year ago

this answer is incomplete, but I've just realized that mine is too! we've both solved half the problem - I think if chanceless draws from both our answers they can solve the problem

Reinstate Monica Cellio Over a year ago

@Hacketo and I responded to your comment after he'd changed it. I think we agree with each other. Let's just delete all the things :p

|

Solutionswithus · Accepted Answer · 2015-07-30 13:28:11Z

0

Please use this code :

var picnumber = 1;
function nextpicture(picnumberLocal){
    picnumber = picnumberLocal+ 1;
    setImage();
}
function previouspicture(picnumberLocal){
    picnumber = picnumberLocal- 1;
    setImage();
}

function setImage(){
    if (picnumber == 1){
    document.getElementById('gallerypicture').src = "img/gallery/001.jpg";
    document.getElementById('galleryprevious').style.display = 'none';
    }
    else if (picnumber == 2){
    document.getElementById('gallerypicture').src = "img/gallery/002.jpg";
    }
    else if (picnumber == 3){
    document.getElementById('gallerypicture').src = "img/gallery/003.jpg";
    }
    else if (picnumber == 4){
    document.getElementById('gallerypicture').src = "img/gallery/004.jpg";
    }
    else if (picnumber == 5){
    document.getElementById('gallerypicture').src = "img/gallery/005.jpg";
    }
    else if (picnumber == 6){
    document.getElementById('gallerypicture').src = "img/gallery/006.jpg";
    document.getElementById('gallerynext').style.display = 'none';
    }
    else {  
        document.getElementById('gallery').style.display = 'none';
    }
}
setImage();

edited Jul 30, 2015 at 13:28

answered Jul 30, 2015 at 13:23

Solutionswithus

1495 bronze badges

2 Comments

Hacketo Over a year ago

nextpicture and previouspicture update a local variable picnumber so I guess it can't work

Gershom Maes Over a year ago

the element will always have display=none

Gershom Maes · Accepted Answer · 2015-07-30 13:59:25Z

0

You need something like this:

JS:

var picnumber = 1;
function nextpicture()
{
   picnumber++; // increment the picture number

   // if the picnumber is bigger than 6 then we do nothing
   if (picnumber > 6) {
       return;
   }

   setImage();

   // if picnumber is 6 then we don't show the gallerynext button anymore
   if (picnumber == 6) {
       document.getElementById('gallerynext').style.display = 'none';
   }
   // if picnumber is 2 then we must to show again the previous button
   else if(picnumber == 2) {
       document.getElementById('galleryprevious').style.display = 'block';
   }
}

function previouspicture()
{
   picnumber--;

   if (picnumber < 1) {
       return;
   }

   setImage();

   if (picnumber == 1) {
       document.getElementById('galleryprevious').style.display = 'none';
   } else if(picnumber == 5) {
       document.getElementById('gallerynext').style.display = 'block';
   }
}

function setImage() {
    var imgNum = picnumber.toString();
    while (imgNum.length < 3) imgNum = '0'.concat(imgNum);
    // set the picture source depending on the picnumber value
    document.getElementById('gallerypicture').src = "img/gallery/" + imgNum + ".jpg";
}

HTML:

<img id="gallerypicture" src="img/gallery/001.jpg" alt="Photo">
<a href="javascript:void(0)" onclick="previouspicture();"><div id="galleryprevious"></div></a>
<a href="javascript:void(0)" onclick="nextpicture();"><div id="gallerynext"></div></a>

Please note that if you hide the next/previous buttons you also must to show them again

edited Jul 30, 2015 at 13:59

Gershom Maes

8,2273 gold badges42 silver badges64 bronze badges

answered Jul 30, 2015 at 13:25

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

5 Comments

Mihai Matei Over a year ago

Why @epascarello? it is a string concatenated with a number.. it will result in another string..

Mihai Matei Over a year ago

Which is the reason for downvoting? where are the argues?

epascarello Over a year ago

If the OP has 10 images it would be 010.jpg most likely and not 0010.jpg (and I did not downvote and people do not have to explain their votes) I know your answer works with what OP has, not future proofing it.

Mihai Matei Over a year ago

man.. it has 6 pictures.. the example I wrote is for 6 images.. I didn't took in consideration that situation.. I thought he is smart enough to modify the script in order to be able to use more than 9 pictures.. this is not a reason for downvoting.. If he has 100 pictures then he will write 100 if statements?

epascarello Over a year ago

I bet someone down voted your code because you copied the logic twice instead of doing it all in one method. Hence why I did not give you an up or down vote. Answer is not wrong, just not the best way of handling it.

Collectives™ on Stack Overflow

Use if statements with a number variable in JS

3 Answers 3

13 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related