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

标签 javascript css local-storage

我正在用一个简单的唱首歌游戏练习 localStorage，并且有两个“升级”元素可以让游戏速度更快。单击它们时，它们会将特定值从 0 更改为 1，并将元素从可见更改为隐藏。

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

我添加了 CSS/HTML 并清除了不需要的部分。我不知道如何使代码片段与 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>

最佳答案

你只是在这里打错了字:

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重新运行。这使得在第一次保存后第二次重新运行时，这两个按钮会重新出现。

关于Javascript .style 更改影响两个元素，尽管它们的值记录不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61036377/

上一篇：google-cloud-messaging - FCM HTTP V1 API 为未注册的 token 返回 404

下一篇：javascript - 将字符限制为 5000 的正则表达式

相关文章：

javascript - 为什么我的 localStorage 输入在我的个人计算机上跨页面不持久？

javascript - 如何伪造 jquery-ui-datepicker 的当前日期

javascript - 重复时更改颜色和移动元素的 Jquery 坐标

javascript - 当这些样式移入 .CSS 文件时，直接应用于元素的样式将丢失

html - 相对于其兄弟元素绝对定位一个元素

javascript - 如何使用Javascript将列表项移动到无序列表中的指定索引(位置)

javascript - React - 如何在刷新后保留页面 URL？

javascript - Firefox 扩展中的 localStorage

javascript - getElementById 无法获取 html id 的值

javascript - 保存到驱动器按钮光标

©2024 IT工具网  联系我们