Local storage example doesn't work how I expect it to be

Question

In my Web university course there is this example with local storage and it says it should show in the input area the number of clicks on the button and also store it in localstorage, but all I get is NaN on the input no matter how many times I click on the button.

<head>
    <script>
        window.onload = function()
        {
        var el=document.getElementById("bt");
        el.onclick= function()
        {
        var x = parseInt(localStorage.getItem("nrc"));
        if (x!==NaN){
        localStorage.setItem("nrc", x + 1);
        }
        else{
        localStorage.setItem("nrc", "1");
        }
        document.getElementById("write").value = localStorage.getItem("nrc");
        }
            document.getElementById("write").value = localStorage.getItem("nrc");
var buton2=document.getElementById("bt2");
        buton2.onlick = function ()
        {
            localStorage.removeItem("nrc");
        }
            }
            </script>
    </head>


    <body>
        <p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
        <button id="bt"> Click</button>
    <button id="bt2"> Click2</button>
    </body>

Edit: problem was solved, but now if i want to remove an item from local storage or clear the localstorage it doesn't work.

`if (x!== NaN)` will always be true, regardless of the content of `localStorage["nrc"]` -> [Why is NaN === NaN false?](https://stackoverflow.com/questions/19955898/why-is-nan-nan-false) — Andreas, Jan 17 '20 at 15:25
Following what @Andreas has pointed out, consider using `isNaN()` — evolutionxbox, Jan 17 '20 at 15:26

score 0 · Answer 1 · answered Jan 17 '20 at 15:32

You were checking a non number to a non number which will always true.

Anyways the solution is already posted in the comments

<head>
  <script>
    window.onload = function() {
      var el = document.getElementById("bt");
      el.onclick = function() {
        var x = parseInt(localStorage.getItem("nrc"));
        if (!isNaN(x)) {
          localStorage.setItem("nrc", x + 1);
        } else {
          localStorage.setItem("nrc", "1");
        }
        document.getElementById("write").value = localStorage.getItem("nrc");
      }
      document.getElementById("write").value = localStorage.getItem("nrc");
    }
  </script>
</head>


<body>
  <p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
  <button id="bt"> Click</button>
</body>

Also, I just tried to clear the local storage and it doesn't work, then tried to remove just an item from local storage and it didn't work either. — Alin Catalin Preda, Jan 17 '20 at 15:37

score 0 · Accepted Answer · answered Jan 17 '20 at 16:22

You have a typo, you wrote onlick instead of onclick

buton2.onclick = function() {
  console.log('clearing storage!');
  localStorage.removeItem("nrc");
  // Reset input back to zero
  document.getElementById("write").value = '0';
}

Complete working example here

Local storage example doesn't work how I expect it to be

2 Answers2