Why wont my value save to localStorage !Help!

Code Help HTML/CSS/JS
1

So, I am making a clicker game and whenever any of the buy2inc() functions are pressed they work fine, and everything else saves when you reload. But, whenever you reload, everything saves except the clickInc
Repl: https://replit.com/@ChickenG1ttrDev/ClickR

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ClickR</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&family=Roboto+Mono:wght@100&display=swap');

    body {
      margin: 0;
      background: whitesmoke;
      text-align: center;
      font-family: Montserrat;
    }

    #cont {
      padding: 20px 40px 20px 20px;
      background: whitesmoke;
      box-shadow: 0 0 10px black;
      width: fit-content;
      border-radius: 10px;
      margin: 30px;
      font-family: Roboto Mono;
    }

    #cont #counter {
      font-size: 64px;
    }

    #cont button {
      padding: 10px 30px;
      background: #6060e1;
      border: none;
      border-radius: 10px;
      font-family: Montserrat;
      font-weight: 900;
      color: white;
      cursor: pointer;
      margin: 10px;
      width: 100%;
    }

    #cont button:hover {
      background: #4545a5;
      transition: all .2s ease-in-out;
    }

    .border {
      background: transparent !important;
      border: 1px solid #6060e1 !important;
      color: #6060e1 !important;
    }

    .price {
      background: white;
      padding: 5px;
      font-weight: bold;
      color: #6060e1;
      border-radius: 7px;
    }

    #main {
      background: linear-gradient(to bottom right, #ae8625, #f7ef8a) !important;
    }

    #main:hover {
      opacity: 0.6;
    }
  </style>
</head>

<body>
  <center>
    <div id="cont">
      <span id="counter">0</span><br>
      <span id="inc">1</span>
      <p> Per/Click</p><br>
      <span id="time">0</span>
      <p> Per/Second</p><br>
      <button id="main" onclick="addCount()">Click Me!</button><br>
      <button onclick="setIncrement(10)">hi</button>
      <button onclick="buy2inc()">+1/Click <span class="price" id="buy1">100</span></button><br>
      <button onclick="buy4inc()">+100/Click <span class="price" id="buy2">5000</span></button><br>
      <button onclick="buy6inc()">+10000/Click <span class="price" id="buy3">50000</span></button><br>
      <button onclick="buy8inc()">+1000000/Click <span class="price" id="buy4">5000000</span></button><br>
      <button onclick="buy9inc()">+1000000000/Click <span class="price" id="buy5">5000000000</span></button><br>
      <button class="border" onclick="reset()">Reset</button>
    </div>
  </center>

  <script>
    localStorage.inc = 1;
    localStorage.price = 100;
    localStorage.price2 = 5000;
    localStorage.price3 = 50000;
    localStorage.price4 = 5000000;
    localStorage.price5 = 5000000000;
    localStorage.clickAmount = localStorage.clickAmount || 0;

    var counter = document.getElementById("counter");
    var incSpan = document.getElementById("inc");
    var clicks = parseInt(localStorage.getItem("clickAmount"));
    var clickInc = parseInt(localStorage.getItem("inc"));
    var price = parseInt(localStorage.getItem("price")) || 100;
    var price2 = parseInt(localStorage.getItem("price2")) || 5000;
    var price3 = parseInt(localStorage.getItem("price3")) || 50000;
    var price4 = parseInt(localStorage.getItem("price4")) || 5000000;
    var price5 = parseInt(localStorage.getItem("price5")) || 5000000000;
    var clicks = parseInt(localStorage.getItem("clickAmount")) || 0;
    var buy1 = document.getElementById("buy1");
    var buy2 = document.getElementById("buy2");
    var buy3 = document.getElementById("buy3");
    var buy4 = document.getElementById("buy4");
    var buy5 = document.getElementById("buy5");


    counter.textContent = clicks;
    incSpan.textContent = clickInc;
    buy1.textContent = price;
    buy2.textContent = price2;
    buy3.textContent = price3;
    buy4.textContent = price4;
    buy5.textContent = price5;


    function reset() {
      localStorage.clear();
      location.reload();
    }

    function addCount() {
      clicks = parseInt(clicks) + clickInc;
      counter.textContent = clicks;
      localStorage.clickAmount = clicks;
    }
    function buy2inc() {
      if (clicks >= price) {
        clicks -= price;
        localStorage.clickAmount = clicks;
        counter.textContent -= price;
        price *= 2;
        clickInc += 1;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy1.textContent = price;
      } else {
        alert("Not enough money");
      }
    }

    function buy4inc() {
      if (clicks >= price2) {
        clicks -= price2;
        localStorage.clickAmount = clicks;
        counter.textContent = clicks;
        price2 *= 2;
        clickInc += 100;
        localStorage.price2 = price2;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy2.textContent = price2;
      } else {
        alert("Not enough money");
      }
    }
    function buy6inc() {
      if (clicks >= price3) {
        clicks -= price3;
        localStorage.clickAmount = clicks;
        counter.textContent -= price3;
        price *= 2;
        clickInc += 10000;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy3.textContent = price3;
      } else {
        alert("Not enough money");
      }
    }
    function buy8inc() {
      if (clicks >= price4) {
        clicks -= price4;
        localStorage.clickAmount = clicks;
        counter.textContent -= price4;
        price *= 2;
        clickInc += 1000000;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy4.textContent = price4;
      } else {
        alert("Not enough money");
      }
    }
    function buy9inc() {
      if (clicks >= price5) {
        clicks -= price5;
        localStorage.clickAmount = clicks;
        counter.textContent -= price5;
        price *= 2;
        clickInc += 1000000000;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy5.textContent = price5;
      } else {
        alert("Not enough money");
      }
    }





  </script>
</body>

</html>
2

as the console (Ctrl↑J) would complain, you haven’t defined any setIncrement function.
If you did have one and use a localStorage.price array instead of multiple localStorage.priceX variables , your code could be a lot shorter. Also you don’t need to have var buy1 =..., var buy2 etc. because the IDs of elements are already brought into scope.

2 Likes
3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.