title: Trying to make a seat reservation system with javascript and save data with local storage
body: <p>Trying to make a seat reservation system with javascript and save data with local storage for a school project.</p>
  
  <p>This what I now have. I have 2dim array with 4 different img(seats) chair one witch is class 1 chair 2 class 2 chair 3 class 3 and chair0 witch is no chair..... But i dont know how to reserve the seat..when I click on it it turns green but i want that when i click again to turn back to the img it had before. And would like if i reserve a seat, when i refresh the page to change the img source (turn grey) meaning its already taken</p>
  
  <p>
  </p>
  
  <p>
  </p>
  
   
  
  
    
  
  <p></p>
  
  <pre><code>var currentDiv = document.getElementById("div1");
  
  var zaal = [     [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
                   [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                   [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                   [3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3],
                   [3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3],
                   [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                   [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                   [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                   [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                   [3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3],
                   [3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3],
                   [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                   [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
                   [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0] ];
  
  
  
  for (i = 0; i &lt; zaal.length; i++) {
      var newLine = document.createElement("br");
      currentDiv.appendChild(newLine);
              for (j = 0; j &lt; zaal[i].length; j++) { 
                  var newImg = document.createElement("img");
                  currentDiv.appendChild(newImg); 
                  newImg.style.width = "8%";
                  newImg.className = "stoelen";
                  newImg.id = "rij_" + i + "_plaats_" + j;
                  newImg.onclick = function() {myFunction(this)};
  
                  if (zaal[i][j] === 3 ) {
                  newImg.src = "pictures/reservering/chairs3.png"; 
  
  
                  }
                  else if (zaal[i][j] === 2 ) {
                  newImg.src = "pictures/reservering/chairs.png"; 
  
                  }
                  else if (zaal[i][j] === 1 ) {
                  newImg.src = "pictures/reservering/chairs5.png";     
  
                  }
                  else{
                  newImg.src = "pictures/reservering/chairs7.png";   
  
                  }
              }
  }
  
  
  function myFunction(x){
      x.src = "pictures/reservering/chairs4.png";
  }
  </code></pre>