title: JavaScript store integer number in localStorage, increase value and render data
body: <p>For my program the user inputs a number to see if this matches the computer guess.  To make things simple and I can better see the flow of the code the number to be guesses is between 0-1.
  Issue I'm having is that I'm not properly saving the data to localStorage and incrementing the key value, if I manually add a value to my key localStorage only updates correctly when I refresh the page, each time I make a guess the program seems to respond correctly but have to refresh after the guess.  Any feedback would be appreciated.</p>
  
  <p>index.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Guess # | Main&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Guess Number Between 0-1&lt;/h1&gt;
      &lt;form&gt;
          &lt;input id="enter-value" placeholder="Enter a number"&gt;&lt;/input&gt;
          &lt;button id="submit-number"&gt;Submit&lt;/button&gt;
          &lt;button id="reset-button"&gt;Reset&lt;/button&gt;
      &lt;/form&gt;
      &lt;div id="result-section"&gt;&lt;/div&gt;
      &lt;div id="count-section"&gt;&lt;/div&gt;
      &lt;script src="functions.js"&gt;&lt;/script&gt;
      &lt;script src="dom.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>dom.js</p>
  
  <pre><code>    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)=&gt;{
      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)=&gt;{    
      const displayResultEl= document.createElement('h2')
      displayResultEl.textContent= message
      document.getElementById('result-section').appendChild(displayResultEl)
  }
  
  const countWins= (userTallyTotal, computerTallyTotal)=&gt;{   
      const countWinsEl= document.createElement('h2')
      countWinsEl.textContent= `User Total Win: ${userTallyTotal} Computer Total Win: ${computerTallyTotal}`
      document.getElementById('count-section').appendChild(countWinsEl)
  }
  
  const resetField= ()=&gt;{
      enterValue.value=''
      enterValue.focus()
  }
  </code></pre>