对于我的程序，用户输入一个数字，看看这个数字是否与计算机的猜测相匹配。 为了使事情简单，我可以更好地看到代码的流程，要猜测的数字在0-1之间。 我遇到的问题是，我没有正确地将数据保存到localStorage并递增键值，如果我手动向键添加一个值localStorage只有在刷新页面时才正确更新，那么每次我进行猜测时，程序似乎都正确地响应，但必须在猜测之后进行刷新。 如有任何反馈，将不胜感激。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess # | Main</title>
</head>
<body>
<h1>Guess Number Between 0-2</h1>
<form>
<input id="enter-value" placeholder="Enter a number"></input>
<button id="submit-number">Submit</button>
</form>
<div id="result-section"></div>
<div id="count-section"></div>
<script src="functions.js"></script>
<script src="dom.js"></script>
</body>
</html>
dom.js
const submitNumber= document.getElementById('submit-number')
const enterValue= document.getElementById('enter-value')
const resultSection= document.getElementById('result-section')
const countSection= document.getElementById('count-section')
submitNumber.addEventListener('click', function(e){
e.preventDefault()
resultSection.textContent=''
countSection.textContent=''
const userNumInput= enterValue.value.trim()
userGuess(userNumInput)
})
functions.js
const userTallyTotal= localStorage.getItem('userWinsTotal')
const computerTallyTotal= localStorage.getItem('computerWinsTotal')
let userWinsTotal
let computerWinsTotal
const userGuess= (userNumber)=>{
let message=''
// if (userTallyTotal==null || computerTallyTotal==null){
// userWinsTotal= 0
// computerWinsTotal= 0
// } else {
userWinsTotal= userTallyTotal
computerWinsTotal= computerTallyTotal
console.log(userWinsTotal)
console.log(computerWinsTotal)
// }
let numberChoice= userNumber
const randomNum= Math.floor(Math.random()*2)
numberChoice= parseInt(numberChoice, 10)
if (isNaN(numberChoice)){
message+= 'This is not a number, try again.'
displayResult(message)
resetField()
return
}
if (numberChoice===randomNum) {
userWinsTotal++
localStorage.setItem('userWinsTotal', userWinsTotal)
message+= `You won! You guessed: ${numberChoice} and the computer guessed: ${randomNum}`
} else {
computerWinsTotal++
localStorage.setItem('computerWinsTotal', computerWinsTotal)
message+= `Sorry Try Again! You guessed: ${numberChoice} and the computer guessed: ${randomNum}`
}
resetField()
displayResult(message)
countWins(userWinsTotal,computerWinsTotal)
}
const displayResult= (message)=>{
const displayResultEl= document.createElement('h2')
displayResultEl.textContent= message
document.getElementById('result-section').appendChild(displayResultEl)
}
const countWins= (userWinsTotal, computerWinsTotal)=>{
console.log(userWinsTotal)
console.log(computerWinsTotal)
const countWinsEl= document.createElement('h2')
countWinsEl.textContent= `User Total Win: ${(userWinsTotal)} Computer Total Win: ${computerWinsTotal}`
document.getElementById('count-section').appendChild(countWinsEl)
}
const resetField= ()=>{
enterValue.value=''
enterValue.focus()
}
countWins (userTallyTotal, computerTallyTotal)
我相信localstorage只能保存字符串，因此UserWinstotal将被转换为字符串。 您可以尝试在增量之前Math.ParseInt它吗？
我发现了所有的问题:
1.@yesset Zhussupov提到的localstorage只能存储字符串，因此在重新加载时需要解析consts:
const userTallyTotal= parseInt(localStorage.getItem('userWinsTotal'))
const computerTallyTotal= parseInt(localStorage.getItem('computerWinsTotal'))
userWinsTotal= userTallyTotal
computerWinsTotal= computerTallyTotal
其中UserTallyTotal和ComputerTallyTotal是const-type.
对此的修复简单为:
userWinsTotal= userWinsTotal||userTallyTotal
computerWinsTotal= computerWinsTotal||computerTallyTotal
它将检查该变量是否已初始化
