title: Use if statements with a number variable in JS
body: <p>I am working on a gallery.
  So basically my idea works like this:
  The value of my variable <strong>picnumber</strong> is 1.
  If you click on the <em>next</em> button it will trigger my function <strong>nextpicture</strong>, and of course if you click on the <em>previous</em> button it will trigger my function <strong>previouspicture</strong>.</p>
  
  <p>So what is the job of those functions?</p>
  
  <ul>
  <li><p><strong>nextpicture</strong> = <strong>picnumber</strong> + 1</p></li>
  <li><p><strong>previouspicture</strong> = <strong>picnumber</strong> + 1</p></li>
  </ul>
  
  <p>Ok, so for example we have clicked on <strong>nextpicture</strong> once the value of <strong>picnumber</strong> should be <em>2</em> (if the value is <em>2</em> it should show <em>002.jpg</em>)</p>
  
  <p>I want to achieve that it shows a different picture on whether the value of <strong>picnumber</strong> is 1 - 6</p>
  
  <p>I tried to do this with if and else if statements, however it didn't work.</p>
  
  <pre><code>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';
  }
  </code></pre>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;img id="gallerypicture" src="" alt="Photo"&gt;
  &lt;a href="javascript:void(0)" onclick="previouspicture(picnumber);"&gt;&lt;div id="galleryprevious"&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="javascript:void(0)" onclick="nextpicture(picnumber);"&gt;&lt;div id="gallerynext"&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>As you can see in my first and in my last if statement, I'd like to hide the div to click <em>previous</em> or <em>next</em>, so the value of <strong>picnumber</strong> can't be lower than 1 or higher than 6 (since I only have 6 pictures in this gallery)</p>