試圖用javascript創建座位預約系統並用本地存儲保存數據

Question

試圖用JavaScript創建座位預訂系統並將數據與本地存儲保存爲學校項目。

這就是我現在擁有的。我有4個不同的img（座位）椅子2dim陣列一個女巫是1班椅2班2班椅3班3和chair0女巫是沒有椅子.....但我不知道如何預留座位..當我點擊在它上面它變成綠色，但我想要當我再次點擊回到它以前的img。並想如果我預訂一個座位，當我刷新改變IMG源的頁面（變灰），這意味着它已經採取

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 < zaal.length; i++) { 
    var newLine = document.createElement("br"); 
    currentDiv.appendChild(newLine); 
      for (j = 0; j < 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"; 
} 

Answer 1

我明白了！

這是本地存儲解決方案！我不知道你可以將變量作爲本地存儲的關鍵。

var stoel; 
    var gereserveerd = localStorage.getItem(stoel); 
    var stoelPrijs = 0; 
    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] ]; 



function maakStoelen() { 
    for (i = 0; i < zaal.length; i++) { 
     var newLine = document.createElement("br"); 
     currentDiv.appendChild(newLine); 
       for (j = 0; j < zaal[i].length; j++) { 
        var newImg = document.createElement("img"); 
        currentDiv.appendChild(newImg); 
        newImg.id = "rij_" + (i+1) + "_plaats_" + j; 
        newImg.onclick = function() {reserveerStoel(this)}; 

        if (isGereserveerd(newImg)) { 
         newImg.setAttribute("src", "pictures/reservering/chairs6.png"); 
         //newImg.src = "pictures/reservering/chairs6.png" 
         newImg.className = "stoel4"; 
        } 

        else if (zaal[i][j] == 3) { 
         newImg.src = "pictures/reservering/chairs3.png"; 
         newImg.className = "stoel3";  

        } 
        else if (zaal[i][j] == 2) { 
         newImg.src = "pictures/reservering/chairs.png"; 
         newImg.className = "stoel2"; 
        } 
        else if (zaal[i][j] == 1) { 
         newImg.src = "pictures/reservering/chairs5.png"; 
         newImg.className = "stoel1";  

        } 
        else { 
         newImg.src = "pictures/reservering/chairs7.png"; 
         newImg.className = "stoel0";  

        } 
       } 
    } 
} 
    maakStoelen(); 


    function isGereserveerd(newImg) { 
     var gevonden = false; 
     var k = 0; 

     while(!gevonden && (k < localStorage.length)) { 
      if (newImg.id == localStorage.key(k)) { 

       gevonden = true; 
      } 
      k++; 
     } 
     return gevonden; 

    } 



    function reserveerStoel(x){ 
    stoel = x.id; 
    if (x.getAttribute("src") == 'pictures/reservering/chairs4.png') { 
     localStorage.removeItem(stoel); 
     if (x.className == "stoel3"){ 
      x.setAttribute("src", 'pictures/reservering/chairs3.png'); 
      stoelPrijs -= 10; 
     } 
     else if (x.className == "stoel2"){ 
      x.setAttribute("src", 'pictures/reservering/chairs.png'); 
      stoelPrijs -= 15; 


     } 
     else if (x.className == "stoel1"){ 
      x.setAttribute("src", 'pictures/reservering/chairs5.png'); 
      stoelPrijs -= 20; 


     } 
    } 
    else if (x.getAttribute("src") == 'pictures/reservering/chairs7.png'){ 
     alert("kan niet reserveren"); 
    } 
    else { 
     localStorage.setItem(stoel, x.id); 
     x.setAttribute("src", 'pictures/reservering/chairs4.png'); 
     if (x.className == "stoel3"){ 
      stoelPrijs += 10; 



     } 
     else if (x.className == "stoel2"){ 
      stoelPrijs += 15; 


     } 
     else if (x.className == "stoel1"){ 
      stoelPrijs += 20; 


     } 

    } 
     alert(x.id); 
     document.getElementById("totaalPrijsText").innerHTML = stoelPrijs; 

} 





</script>