Javascript 样式更改会影响两个元素，尽管它们的值不同

我正在用一个简单的点击游戏练习

localStorage

，它有两个“升级”元素，可以让游戏玩得更快。单击它们时，会将特定值从0更改为1，并将元素从可见更改为隐藏

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

我添加了CSS/HTML并清除了不需要的部分。我不知道如何使代码片段与

localStorage

一起工作，但是结果应该可以在这里重现

//声明常量
const storage=window.localStorage；
常量计数器=document.getElementById（“计数”）；
常量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”）；
让save={}；
var-clickStrength=1；
var=0；
var up1done=0；
var-up2done=0；
//检查保存
if（storage.getItem（“保存”））{
save=JSON.parse（storage.getItem（“save”）；
counter.innerHTML=“Gold:+save.count；
clickStrength=JSON.parse（storage.getItem（“clickStrength”）；
被动=JSON.parse（storage.getItem（“被动”）；
//检查升级
if（JSON.parse（storage.getItem（“up1done”）==0））{
up1.style.visibility=“可见”；
}否则{
up1.style.visibility=“隐藏”；
};
if（JSON.parse（storage.getItem（“up2done”）==0））{
up2.style.visibility=“可见”；
}否则{
up2.style.visibility=“隐藏”；
};
}否则{
save.count=0；
counter.innerHTML=“黄金：”+0；
};
clicker.addEventListener（“单击”，函数（）{
save.count=save.count+点击强度；
counter.innerHTML=“Gold:+save.count；
});
//拯救
savebtn.addEventListener（“单击”，函数（）{
setItem（“save”，JSON.stringify（save））；
storage.setItem（“clickStrength”，JSON.stringify（clickStrength））；
setItem（“被动”，JSON.stringify（被动））；
setItem（“up1done”，JSON.stringify（up1done））；
setItem（“up2done”，JSON.stringify（up2done））；
});
//清楚的
clearbtn.addEventListener（“单击”，函数（）{
存储。清除（）；
});
//升级
up1.addEventListener（“单击”，函数（）{
点击强度=点击强度+1；
up1.style.visibility=“隐藏”；
up1done=up1done+1；
});
up2.addEventListener（“单击”，函数（）{
被动=被动+0.5；
up2.style.visibility=“隐藏”；
up2done=up2done+1；
});
console.log（up1done）；
console.log（up2done）；
log（JSON.parse（storage.getItem（“up1done”））；
console.log（clickStrength）；
log（JSON.parse（storage.getItem（“up2done”））
#包装器{
显示：网格；
证明内容：中心；
网格模板列：重复（3，1fr）；
高度：98vh；
宽度：100%；
栅隙：10px；
}
#存储条{
显示：网格；
证明内容：中心；
网格模板列：重复（3，1fr）；
网格柱：1/3；
网格行：1/2；
栅隙：10px；
}
.savebtn{
文本对齐：居中；
身高：30%；
自对准：居中；
边界半径：8px；
光标：指针；
边缘底部：5vh；
颜色：白色；
-网络工具包盒阴影：1px 3px 10px 0px rgba（0,0,0,0.75）；
-moz盒阴影：1px 3px 10px 0px rgba（0,0,0,0.75）；
盒影：1px 3px 10px 0px rgba（0,0,0,0.75）；
}
#savebtn{
背景颜色：绿色；
}
#clearbtn{
背景色：红色；
}
#自动的{
背景颜色：蓝色；
}
#游戏空间{
网格柱：1/3；
网格行：2/5；
}
#升级{
网格柱：3/4；
网格行：1/5；
}
#upInfo{
文本对齐：居中；
边缘顶部：5vh；
字号：2.5em；
}
#上包装{
网格间距：5px；
显示：网格；
网格模板列：重复（2，1fr）；
}
.ups{
宽度：90%；
光标：指针；
宽度：100px；
高度：100px；
背景色：红色；
}
.upsTool{
可见性：隐藏；
位置：绝对位置；
文本对齐：居中；
背景色：暗灰色；
宽度：10vw；
高度：5vh；
线路高度：5vh；
左边距：3.25vh；
字体大小：.85em；
边界半径：8px；
}
.ups：悬停.ups工具{
能见度：可见；
}

拯救
清楚的
点击我！
金牌：0
升级！
点击金色+1
收入+0.5
您只是在此处输入了一个错误：

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

看一下括号。它应该是
if（JSON.parse（storage.getItem（“up1done”））==0）
。您可以在JSFIDLE中运行
localStorage
。试着运行它


//声明常量
const storage=window.localStorage；
常量计数器=document.getElementById（“计数”）；
常量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”）；
让save={}；
var-clickStrength=1；
var=0；
var up1done=0；
var-up2done=0；
//检查保存
if（storage.getItem（“保存”））{
save=JSON.parse（storage.getItem（“save”）；
counter.innerHTML=“Gold:+save.count；
clickStrength=JSON.parse（storage.getItem（“clickStrength”）；
被动=JSON.parse（storage.getItem（“被动”）；
//检查升级
if（JSON.parse（storage.getItem（“up1done”）==0）{
up1.style.visibility=“可见”；
}否则{
up1.style.visibility=“隐藏”；
};
if（JSON.parse（storage.getItem（“up2done”））==0）{
up2.style.visibility=“可见”；
}否则{
up2.style.visibility=“隐藏”；
};
}否则{
save.count=0；
counter.innerHTML=“黄金：”+0；
};
clicker.addEventListener（“单击”），函数