我正在制作一個閑置的答題器游戲，一切都很順利，直到我遇到問題。
我基本上想要發生的是當單擊影像并且 clickCounter 元素超過一個時，會創建新的影像元素。這里沒問題，主要問題是保存影像。如果用戶重繪 頁面，我希望創建的元素仍然存在。我曾嘗試使用outerHTML并關注其他一些 Stack Overflow 論壇問題，但我永遠無法為這個特定問題找到合適的解決方案。我也嘗試過localStorage和cookie，但我相信我用錯了。
我的代碼在下面，我的sololearn 將在下面鏈接，其中包含我專案的完整代碼。
function oneHundThou() {
var countvar = document.getElementById("clickCounter")
if(document.getElementById("clickCounter").innerHTML > 1) {
alert("Achievement! 1 pat!")
var achievement1k = document.createElement("img");
// create a cookie so when the user refreshes the page, the achievement is shown again
document.cookie = "achievement1k=true";
achievement1k.src = "https://c.pxhere.com/images/f2/ec/a3fcfba7993c96fe881024fe21e7-1460589.jpg!d";
achievement1k.style.height = "1000px"
achievement1k.style.width = "1000px"
achievement1k.style.backgroundColor = "red"
document.body.appendChild(achievement1k);
oneHundThou = function(){}; // emptying my function after it is run once instead of using a standard switch statement
}
else {
return
}
}
oneHundThou();
我知道還有另一個與此類似的帖子，但是，我的回答無法在該帖子上得到回答。
完整代碼在這里：https ://code.sololearn.com/Wwdw59oenFqB 請幫忙！謝謝你。（：
uj5u.com熱心網友回復：
不要存盤影像，而是嘗試存盤innerHTML，然后在檔案加載時創建影像：
function oneHundThou() {
countvar.innerHTML = localStorage.getItem('clickCount') ? localStorage.getItem('clickCount') : 0; //before if
//original code
localStorage.setItem('clickCount', countvar.innerHTML); //instead of doc.cookie
}
window.addEventListener('DOMContentLoaded', (event) => {
oneHundThou();
});
或者，如果您不關心 clickCounter 可能會初始化為null，則可以洗掉? :并放置
countvar.innerHTML = localStorage.getItem('clickCount');
countvar編輯：帶有變數的縮短代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488233.html
標籤：javascript 动画 饼干 点击 本地存储
上一篇：我缺少任何鏈接-HTML/CSS
下一篇：在css中并排對齊專案