Javascript .style 更改影响两个元素，尽管它们的值记录不同答案

【问题标题】：Javascript .style changes affecting two elements though their values are logging differentJavascript .style 更改影响两个元素，尽管它们的值记录不同
【发布时间】：2020-07-17 01:38:51
【问题描述】：

我正在练习localStorage 与一个简单的点击游戏，并有两个“升级”元素，使游戏更快。单击它们时，它们会将特定值从 0 更改为 1，并将元素从可见更改为隐藏。

当我“购买”升级然后保存游戏并刷新日志时，如果我购买了一个升级（该升级的值为 1，而另一个升级的值仍为 0），它会正确返回值。然而，即使他们记录了两个不同的值，我检查 0 值的 if 语句仍然导致两个元素在只购买一个时被隐藏。

我添加了 CSS/HTML 并清除了不需要的位。我不知道如何使 sn-p 与 localStorage 一起工作，但结果应该可以在这里重现。

//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>

【问题讨论】：

我认为存储应该使用字符串，尝试将它们转换为整数/数字，然后再更改...
您需要添加 HTML/CSS 结构。您面临的这个错误也可能是由一些意外覆盖的 CSS 样式引起的。现在，我无法重现该问题。请查看how to create a minimal, reproducible example。它不必是完全相同的 HTML/CSS 代码，足以让我们看到问题。
@Richard 我已经添加了我的 CSS/HTML 并取出了不影响这一点的 CSS/JS。由于 localStorage 错误，sn-p 无法运行，但现在应该可以重现了。

标签： javascript css local-storage

【解决方案1】：

你只是在这里打错了：

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

看看括号。应该是if (JSON.parse(storage.getItem("up1done")) === 0)。您可以在 JSFiddle 中运行 localStorage。尝试运行它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>

虽然与您的要求无关，但我认为您无意在每次重新运行游戏时将变量 up1done 和 up2done 设置为 0。这使得两个按钮在第一次保存后第二次重新运行时重新出现。

【讨论】：

是的，我正要问按钮是否会重新出现，但你抢先了。我已经解决了这两个问题，并且运行良好。这让我对范围和 localStorage 有了更好的理解，并回答了我的问题，谢谢！
@Shniper 很高兴我能帮上忙。我只能提供帮助，因为您的问题很清楚;-)