Javascript .style changes affecting two elements though their values are logging different

Question

I'm practicing localStorage with a simple clicker game and have two "upgrade" elements which make the gameplay faster. When they are clicked they change a specific value from 0 to 1 and also change an element from visible to hidden.

When I "buy" an upgrade and then save the game and refresh the log, it is returning the values properly if I bought one upgrade (that upgrade's value is 1 and the other upgrade's value is still 0). However, even though they are logging two different values, my if statement which checks for a 0 value is still causing both of elements to get hidden when only one is bought.

I added CSS/HTML and cleared out the bits not needed. I don't know how to make a snippet work with localStorage but the results should be reproducible here.

//declare constants
const storage = window.localStorage;
const counter = document.getElementById("count");
const clicker = document.getElementById("clicker");
const savebtn = document.getElementById("savebtn");
const clearbtn = document.getElementById("clearbtn");
const auto = document.getElementById("auto");
const up1 = document.getElementById("up1");
const up2 = document.getElementById("up2");


let save = {};
var clickStrength = 1;
var passive = 0;
var up1done = 0;
var up2done = 0;

//check save
if (storage.getItem("save")) {
  save = JSON.parse(storage.getItem("save"));
  counter.innerHTML = "Gold: " + save.count;
  clickStrength = JSON.parse(storage.getItem("clickStrength"));
  passive= JSON.parse(storage.getItem("passive"));

  //check upgrades
  if (JSON.parse(storage.getItem("up1done") === 0)) {
    up1.style.visibility = "visible";
  } else {
    up1.style.visibility = "hidden";
  };

  if (JSON.parse(storage.getItem("up2done") === 0)) {
    up2.style.visibility = "visible";
  } else {
    up2.style.visibility = "hidden";
  };

} else {
  save.count = 0;
  counter.innerHTML = "Gold: " + 0;
};

clicker.addEventListener("click", function() {
  save.count = save.count + clickStrength;
  counter.innerHTML = "Gold: " + save.count;
});

//save
savebtn.addEventListener("click", function() {
  storage.setItem("save", JSON.stringify(save));
  storage.setItem("clickStrength", JSON.stringify(clickStrength));
  storage.setItem("passive", JSON.stringify(passive));
  storage.setItem("up1done", JSON.stringify(up1done));
  storage.setItem("up2done", JSON.stringify(up2done));
});

//clear
clearbtn.addEventListener("click", function () {
  storage.clear();
});

//Upgrades
up1.addEventListener("click", function() {
  clickStrength = clickStrength + 1;
  up1.style.visibility = "hidden";
  up1done = up1done + 1;
});

up2.addEventListener("click", function() {
  passive = passive + 0.5;
  up2.style.visibility = "hidden";
  up2done = up2done + 1;
});


console.log(up1done);
console.log(up2done);
console.log(JSON.parse(storage.getItem("up1done")));
console.log(clickStrength);
console.log(JSON.parse(storage.getItem("up2done")));

#wrapper {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  height: 98vh;
  width: 100%;
  grid-gap: 10px;
}

#savebar {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/3;
  grid-row: 1/2;
  grid-gap: 10px;
}

.savebtn {
  text-align: center;
  height: 30%;
  align-self: center;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5vh;
  color: white;
  -webkit-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
}

#savebtn {
  background-color: green;
}

#clearbtn {
  background-color: red;
}

#auto {
  background-color: blue;
}

#gamespace {
  grid-column: 1/3;
  grid-row: 2/5;
}


#upgrades {
  grid-column: 3/4;
  grid-row: 1/5;
}

#upInfo {
  text-align: center;
  margin-top: 5vh;
  font-size: 2.5em;
}

#upsWrap {
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.ups {
  width: 90%;
  cursor: pointer;
  width: 100px;
  height: 100px;
  background-color: red;
}

.upsTool {
  visibility: hidden;
  position: absolute;
  text-align: center;
  background-color: darkGrey;
  width: 10vw;
  height: 5vh;
  line-height: 5vh;
  margin-left: 3.25vh;
  font-size: .85em;
  border-radius: 8px;
}

.ups:hover .upsTool {
  visibility: visible;
}

<body>

  <div id="wrapper">

    <div id="savebar">
      <span id="savebtn" class="savebtn">Save</span>
      <span id="clearbtn" class="savebtn">Clear</span>
      <span id="auto" class="savebtn"></span>
    </div>

    <div id="gamespace">
      <div id="clicker">Click Me!</div>
      <div id="count">Gold: 0</div>
    </div>



    <div id="upgrades">
      <div id="upInfo">Upgrades!</div>
      <div id="upsWrap">
        <div id="up1" class="ups"><div id="up1Tool" class="upsTool">Click gold +1</div></div>
        <div id="up2" class="ups"><div id="up2Tool" class="upsTool">Income +0.5</div></div>
      </div>
    </div>

  </div>

</body>

Answer 1

You simply made a typo here:

if (JSON.parse(storage.getItem("up1done") === 0)) {
   ...
}

Take a look at the parentheses. It should be if (JSON.parse(storage.getItem("up1done")) === 0). You can run localStorage in JSFiddle. Try running it here.

//declare constants
const storage = window.localStorage;
const counter = document.getElementById("count");
const clicker = document.getElementById("clicker");
const savebtn = document.getElementById("savebtn");
const clearbtn = document.getElementById("clearbtn");
const auto = document.getElementById("auto");
const up1 = document.getElementById("up1");
const up2 = document.getElementById("up2");


let save = {};
var clickStrength = 1;
var passive = 0;
var up1done = 0;
var up2done = 0;

//check save
if (storage.getItem("save")) {
  save = JSON.parse(storage.getItem("save"));
  counter.innerHTML = "Gold: " + save.count;
  clickStrength = JSON.parse(storage.getItem("clickStrength"));
  passive= JSON.parse(storage.getItem("passive"));

  //check upgrades
  if (JSON.parse(storage.getItem("up1done")) === 0) {
    up1.style.visibility = "visible";
  } else {
    up1.style.visibility = "hidden";
  };

  if (JSON.parse(storage.getItem("up2done")) === 0) {
    up2.style.visibility = "visible";
  } else {
    up2.style.visibility = "hidden";
  };

} else {
  save.count = 0;
  counter.innerHTML = "Gold: " + 0;
};

clicker.addEventListener("click", function() {
  save.count = save.count + clickStrength;
  counter.innerHTML = "Gold: " + save.count;
});

//save
savebtn.addEventListener("click", function() {
  storage.setItem("save", JSON.stringify(save));
  storage.setItem("clickStrength", JSON.stringify(clickStrength));
  storage.setItem("passive", JSON.stringify(passive));
  storage.setItem("up1done", JSON.stringify(up1done));
  storage.setItem("up2done", JSON.stringify(up2done));
});

//clear
clearbtn.addEventListener("click", function () {
  storage.clear();
});

//Upgrades
up1.addEventListener("click", function() {
  clickStrength = clickStrength + 1;
  up1.style.visibility = "hidden";
  up1done = up1done + 1;
});

up2.addEventListener("click", function() {
  passive = passive + 0.5;
  up2.style.visibility = "hidden";
  up2done = up2done + 1;
});


console.log(up1done);
console.log(up2done);
console.log(JSON.parse(storage.getItem("up1done")));
console.log(clickStrength);
console.log(JSON.parse(storage.getItem("up2done")));

#wrapper {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  height: 98vh;
  width: 100%;
  grid-gap: 10px;
}

#savebar {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/3;
  grid-row: 1/2;
  grid-gap: 10px;
}

.savebtn {
  text-align: center;
  height: 30%;
  align-self: center;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5vh;
  color: white;
  -webkit-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
}

#savebtn {
  background-color: green;
}

#clearbtn {
  background-color: red;
}

#auto {
  background-color: blue;
}

#gamespace {
  grid-column: 1/3;
  grid-row: 2/5;
}


#upgrades {
  grid-column: 3/4;
  grid-row: 1/5;
}

#upInfo {
  text-align: center;
  margin-top: 5vh;
  font-size: 2.5em;
}

#upsWrap {
  grid-gap: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.ups {
  width: 90%;
  cursor: pointer;
  width: 100px;
  height: 100px;
  background-color: red;
}

.upsTool {
  visibility: hidden;
  position: absolute;
  text-align: center;
  background-color: darkGrey;
  width: 10vw;
  height: 5vh;
  line-height: 5vh;
  margin-left: 3.25vh;
  font-size: .85em;
  border-radius: 8px;
}

.ups:hover .upsTool {
  visibility: visible;
}

<body>

  <div id="wrapper">

    <div id="savebar">
      <span id="savebtn" class="savebtn">Save</span>
      <span id="clearbtn" class="savebtn">Clear</span>
      <span id="auto" class="savebtn"></span>
    </div>

    <div id="gamespace">
      <div id="clicker">Click Me!</div>
      <div id="count">Gold: 0</div>
    </div>



    <div id="upgrades">
      <div id="upInfo">Upgrades!</div>
      <div id="upsWrap">
        <div id="up1" class="ups"><div id="up1Tool" class="upsTool">Click gold +1</div></div>
        <div id="up2" class="ups"><div id="up2Tool" class="upsTool">Income +0.5</div></div>
      </div>
    </div>

  </div>

</body>

Although unrelated to what you're asking, I think that it is your not intention to set the variables up1done and up2done to 0 every time the game is rerun. This makes the two buttons reappear when rerunning the second time after saving the first time.