1
votes

JavaScript stocke le nombre entier dans localStorage, augmente la valeur et rend les données

Pour mon programme, l'utilisateur entre un nombre pour voir si cela correspond à la supposition de l'ordinateur. Pour rendre les choses simples et que je peux mieux voir le flux du code, le nombre à deviner est compris entre 0-1. Le problème que je rencontre est que je ne sauvegarde pas correctement les données dans localStorage et que j'incrémente la valeur de la clé, si j'ajoute manuellement une valeur à ma clé localStorage ne se met à jour correctement que lorsque j'actualise la page, chaque fois que je devine le programme semble répondre correctement mais doit se rafraîchir après la conjecture. Tout commentaire serait apprécié.

index.html

    const submitNumber= document.getElementById('submit-number')
    const enterValue= document.getElementById('enter-value')
    const resultSection= document.getElementById('result-section')
    const countSection= document.getElementById('count-section')
    const resetButton= document.getElementById('reset-button')

    submitNumber.addEventListener('click', function(e){
        e.preventDefault()
        resultSection.textContent=''
        countSection.textContent=''
        const userNumInput= enterValue.value.trim()
        userGuess(userNumInput)
    })

    resetButton.addEventListener('click', function(e){
        e.preventDefault()
        localStorage.clear()
        countSection.textContent=''
        resetField()
        resultSection.textContent=''
    })

functions.js

let userTallyTotal
let computerTallyTotal 

const userGuess= (userNumber)=>{
    let message=''
    localStorage.getItem('userWinsTotal')!= null ? userTallyTotal : userTallyTotal= 0
    localStorage.getItem('computerWinsTotal')!= null ? computerTallyTotal : computerTallyTotal= 0
    //Current problem I'm facing now is that refreshing the page and submitting a value changes localStorage value to NaN

    let numberChoice= userNumber
    const randomNum= Math.floor(Math.random()*1)
    numberChoice= parseInt(numberChoice, 10)

    if (isNaN(numberChoice)){
        message+= 'This is not a number, try again.'
        displayResult(message)
        resetField()
        return
    }

    if (numberChoice===randomNum) {
        parseInt(userTallyTotal, 10)
        userTallyTotal++
        localStorage.setItem('userWinsTotal', userTallyTotal)
        message+= `You won! You guessed: ${numberChoice} and the computer guessed: ${randomNum}`
    } else {    
        parseInt(computerTallyTotal, 10)
        computerTallyTotal++
        localStorage.setItem('computerWinsTotal', computerTallyTotal)
        message+= `Sorry Try Again! You guessed: ${numberChoice} and the computer guessed: ${randomNum}`
    }
        resetField()
        displayResult(message)
        countWins(userTallyTotal,computerTallyTotal)
}

const displayResult= (message)=>{    
    const displayResultEl= document.createElement('h2')
    displayResultEl.textContent= message
    document.getElementById('result-section').appendChild(displayResultEl)
}

const countWins= (userTallyTotal, computerTallyTotal)=>{   
    const countWinsEl= document.createElement('h2')
    countWinsEl.textContent= `User Total Win: ${userTallyTotal} Computer Total Win: ${computerTallyTotal}`
    document.getElementById('count-section').appendChild(countWinsEl)
}

const resetField= ()=>{
    enterValue.value=''
    enterValue.focus()
}

dom.js

    <!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-1</h1>
    <form>
        <input id="enter-value" placeholder="Enter a number"></input>
        <button id="submit-number">Submit</button>
        <button id="reset-button">Reset</button>
    </form>
    <div id="result-section"></div>
    <div id="count-section"></div>
    <script src="functions.js"></script>
    <script src="dom.js"></script>
</body>
</html>

javascript local-storage

0 commentaires

3 Réponses :

0
votes

Je crois que localStorage ne peut contenir que des chaînes, donc userWinsTotal sera converti en chaîne. Pourriez-vous essayer de le Math.parseInt avant l'incrémentation?

2 commentaires

J'apprécie, je pense que les modifications ci-dessous en tiennent compte selon vos commentaires. Je travaille toujours sur d'autres détails. Désolé pour le travail de mise en forme des commentaires en cours. parseInt (userWinsTotal, 10) userWinsTotal ++ parseInt (computerWinsTotal, 10) computerWinsTotal ++

J'ai également révisé mon code, semble fonctionner correctement bien que ma fonction userGuess semble très compliquée avec l'instruction if / else if.

0
votes

J'ai trouvé tous les problèmes:

1. localStorage , comme mentionné par @Yesset Zhussupov, ne peut stocker que des chaînes, donc lors du rechargement, vous devez analyser vos consts:

userWinsTotal= userWinsTotal||userTallyTotal
computerWinsTotal= computerWinsTotal||computerTallyTotal

Vous appelez userGuess à chaque fois et vous réinitialisez vos compteurs avec:

userWinsTotal= userTallyTotal
computerWinsTotal= computerTallyTotal

où userTallyTotal et computerTallyTotal sont de type const .
Le correctif pour cela est simplement:

const userTallyTotal= parseInt(localStorage.getItem('userWinsTotal'))
const computerTallyTotal= parseInt(localStorage.getItem('computerWinsTotal'))

Ce qui vérifiera si ces variables sont initialisées ou non

2 commentaires

J'ai révisé mon code corrigé certains éléments et il semble fonctionner correctement, je suis sûr que mon code sous la fonction userGuess en particulier l'instruction if n'est pas la meilleure approche. J'essayais de suivre vos commentaires en utilisant, mais je ne savais pas comment le configurer. Peut-être pourriez-vous nous faire part de vos commentaires pour voir si cette fois je suis d'accord? Merci.

La fonction userGuess est configurée pour utiliser l'opérateur ternaire et tout semble fonctionner correctement, sauf si je rafraîchis la page et soumets une nouvelle valeur. localStorage a défini la valeur sur NaN. Travailler à corriger cela et afficher le message si j'actualise la page et que les valeurs sont stockées. J'ai également mis à jour mon code functions.js pour examen si possible.

0
votes

Ceci est mon code final, testé et je n'ai plus le problème lors de l'actualisation de la page. J'apprécie l'aide et tous les derniers commentaires qui pourraient m'aider à améliorer cela en tant que débutant. index.html

let userTallyTotal= localStorage.getItem('userWinsTotal')
let computerTallyTotal= localStorage.getItem('computerWinsTotal')

const checkStoredData=()=>{
    localStorage.getItem('userWinsTotal')!= null ? userTallyTotal : userTallyTotal= 0
    localStorage.getItem('computerWinsTotal')!= null ? computerTallyTotal : computerTallyTotal= 0
}

const userGuess= (userNumber)=>{
    checkStoredData()
    let message=''
    let numberChoice= userNumber
    const randomNum= Math.floor(Math.random()*1)
    numberChoice= parseInt(numberChoice, 10)

    if (isNaN(numberChoice)){
        message+= 'This is not a number, try again.'
        displayResult(message)
        resetField()
        return
    }
    
    if (numberChoice===randomNum) {
        parseInt(userTallyTotal, 10)
        userTallyTotal++
        localStorage.setItem('userWinsTotal', userTallyTotal)
        message+= `You won! You guessed: ${numberChoice} and the computer guessed: ${randomNum}`
    } else {    
        parseInt(computerTallyTotal, 10)
        computerTallyTotal++
        localStorage.setItem('computerWinsTotal', computerTallyTotal)
        message+= `Sorry Try Again! You guessed: ${numberChoice} and the computer guessed: ${randomNum}`
    }
        resetField()
        displayResult(message)
        countWins(userTallyTotal,computerTallyTotal)
}

const displayResult= (message)=>{    
    const displayResultEl= document.createElement('h2')
    displayResultEl.textContent= message
    document.getElementById('result-section').appendChild(displayResultEl)
}

const countWins= (userTallyTotal, computerTallyTotal)=>{    
    const countWinsEl= document.createElement('h2')
    countWinsEl.textContent= `User Total Win: ${userTallyTotal || 0} Computer Total Win: ${computerTallyTotal || 0}`
    document.getElementById('count-section').appendChild(countWinsEl)
}

const resetField= ()=>{
    enterValue.value=''
    enterValue.focus()
    countSection.textContent=''
}

countWins(userTallyTotal, computerTallyTotal)

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')
const resetButton= document.getElementById('reset-button')

submitNumber.addEventListener('click', function(e){
    e.preventDefault()
    resultSection.textContent=''
    countSection.textContent=''
    const userNumInput= enterValue.value.trim()
    userGuess(userNumInput)
})

resetButton.addEventListener('click', function(e){
    e.preventDefault()
    localStorage.clear()
    countSection.textContent=''
    resultSection.textContent=''
    resetField()
    countWins(0,0)
})

functions.js

<!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-1</h1>
    <form>
        <input id="enter-value" placeholder="Enter a number"></input>
        <button id="submit-number">Submit</button>
        <button id="reset-button">Reset</button>
    </form>
    <div id="result-section"></div>
    <div id="count-section"></div>
    <script src="functions.js"></script>
    <script src="dom.js"></script>
</body>
</html>

p >

0 commentaires