Nan value appearing, help!

Question

0.00/5 (No votes)

See more:

PLEASE INGORE THE INEFFICIENT CODE

I have made a clicker game, it saves and works fine. Except, sometimes it shows NaN and you have to reset it which completely defeats the purpose of saving things with localstorage. I have tried to parseInt all things and ask chatGPT, but i cant find the answer.

The link: replit.com/@ChickenG1ttrDev/ClickR

Code:

<pre lang="HTML"><pre><!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ClickR</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&family=Roboto+Mono:wght@100&display=swap');

    @media (prefers-color-scheme: dark) {
      .cont {
        color: white !important;
        background: #1e1e1e !important;
      }

      body {
        background: #2f3030 !important;
      }
    }

    body {
      margin: 0;
      background: whitesmoke;
      text-align: center;
      font-family: Montserrat;
    }

    h1 {
      font-family: Montserrat;
    }

    .cont {
      padding: 20px 40px 20px 20px;
      background: whitesmoke;
      box-shadow: 0 0 10px black;
      width: fit-content;
      border-radius: 10px;
      margin: 30px;
      font-family: Roboto Mono;
    }

    .cont #counter {
      font-size: 64px;
    }

    .cont button {
      padding: 10px 30px;
      background: #6060e1;
      border: none;
      border-radius: 10px;
      font-family: Montserrat;
      font-weight: 900;
      color: white;
      cursor: pointer;
      margin: 10px;
      width: 100%;
    }

    .cont button:hover {
      background: #4545a5;
      transition: all .2s ease-in-out;
    }

    .border {
      background: transparent !important;
      border: 1px solid #6060e1 !important;
      color: #6060e1 !important;
    }

    .border:hover {
      box-shadow: 0 0 7px gray;
    }

    .price {
      background: white;
      padding: 5px;
      font-weight: bold;
      color: #6060e1;
      border-radius: 7px;
    }

    #main {
      background: linear-gradient(to bottom right, #ae8625, #f7ef8a) !important;
    }

    #main:hover {
      opacity: 0.6;
    }
  </style>
</head>

<body>
  <center>
    <div class="cont">
      <h1>Welcome to ClickR</h1>
    </div>
    <div class="cont">
      <span id="counter">0</span><br>
      <span id="inc">1</span>
      <p> Per/Click</p><br>
      <span id="time">0</span>
      <p> Per/Second</p><br>
      <button id="main" onclick="addCount()">Click Me!</button><br>
      <button onclick="buy2inc()">+1/Click 100</button><br>
      <button onclick="time1()">+1/Sec 100</button><br>
      <button onclick="buy4inc()">+100/Click 5000</button><br>
      <button onclick="time2()">+100/Sec 5000</button><br>
      <button onclick="buy6inc()">+10000/Click 50000</button><br>
      <button onclick="time3()">+10000/Sec 50000</button><br>
      <button onclick="buy8inc()">+1000000/Click 5000000</button><br>
      <button onclick="time4()">+1000000/Sec 5000000</button><br>
      <button onclick="buy9inc()">+1000000000/Click 5000000000</button><br>
      <button onclick="time5()">+1000000000/Sec 5000000000</button><br>
      <button class="border" onclick="reset()">Reset</button>
    </div>
  </center>

  <script>
    if (!localStorage.clickAmount) {
      localStorage.clickAmount = 0;
    }
    if (!localStorage.inc) {
      localStorage.inc = 1;
    }
    if (!localStorage.price) {
      localStorage.price = 100;
    }
    if (!localStorage.price2) {
      localStorage.price2 = 5000;
    }
    if (!localStorage.price3) {
      localStorage.price3 = 50000;
    }
    if (!localStorage.price4) {
      localStorage.price4 = 5000000;
    }
    if (!localStorage.price5) {
      localStorage.price5 = 5000000000;
    }
    localStorage.clickAmount = localStorage.clickAmount || 0;

    var counter = document.getElementById("counter");
    var incSpan = document.getElementById("inc");
    var clicks = parseInt(localStorage.getItem("clickAmount"));
    var clickInc = parseInt(localStorage.getItem("inc"));
    var price = parseInt(localStorage.getItem("price")) || 100;
    var price2 = parseInt(localStorage.getItem("price2")) || 5000;
    var price3 = parseInt(localStorage.getItem("price3")) || 50000;
    var price4 = parseInt(localStorage.getItem("price4")) || 5000000;
    var price5 = parseInt(localStorage.getItem("price5")) || 5000000000;
    var buy1 = document.getElementById("buy1");
    var buy2 = document.getElementById("buy2");
    var buy3 = document.getElementById("buy3");
    var buy4 = document.getElementById("buy4");
    var buy5 = document.getElementById("buy5");
    var time = document.getElementById("time");

    counter.textContent = parseInt(localStorage.clickAmount);
    incSpan.textContent = clickInc;
    buy1.textContent = price;
    buy2.textContent = price2;
    buy3.textContent = price3;
    buy4.textContent = price4;
    buy5.textContent = price5;


    function reset() {
      clicks = 0;
      clickInc = 1;
      localStorage.setItem("clickAmount", clicks);
      localStorage.setItem("inc", clickInc);
      localStorage.setItem("price", 100);
      localStorage.setItem("price2", 5000);
      localStorage.setItem("price3", 50000);
      localStorage.setItem("price4", 5000000);
      localStorage.setItem("price5", 5000000000);
      clearInterval(timerId); // clear timer
      timerId = null; // reset timer ID
      counter.innerHTML = clicks;
      incSpan.innerHTML = clickInc;
      document.getElementById("time").innerHTML = 0;
      document.getElementById("buy1").innerHTML = localStorage.getItem("price");
      document.getElementById("buy2").innerHTML = localStorage.getItem("price2");
      document.getElementById("buy3").innerHTML = localStorage.getItem("price3");
      document.getElementById("buy4").innerHTML = localStorage.getItem("price4");
      document.getElementById("buy5").innerHTML = localStorage.getItem("price5");
      location.reload();
    }

    function addCount() {
      clicks = parseInt(clicks) + clickInc;
      counter.textContent = clicks;
      localStorage.clickAmount = clicks;
    }
    function buy2inc() {
      if (clicks >= price) {
        clicks -= price;
        localStorage.clickAmount = clicks;
        counter.textContent -= price;
        price *= 2;
        clickInc += 1;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy1.textContent = price;
      } else {
        alert("Not enough money");
      }
    }

    function buy4inc() {
      if (clicks >= price2) {
        clicks -= price2;
        localStorage.clickAmount = clicks;
        counter.textContent = clicks;
        price2 *= 2;
        clickInc += 100;
        localStorage.price2 = price2;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy2.textContent = price2;
      } else {
        alert("Not enough money");
      }
    }
    function buy6inc() {
      if (clicks >= price3) {
        clicks -= price3;
        localStorage.clickAmount = clicks;
        counter.textContent -= price3;
        price3 *= 2;
        clickInc += 10000;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy3.textContent = price3;
      } else {
        alert("Not enough money");
      }
    }
    function buy8inc() {
      if (clicks >= price4) {
        clicks -= price4;
        localStorage.clickAmount = clicks;
        counter.textContent -= price4;
        price4 *= 2;
        clickInc += 1000000;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy4.textContent = price4;
      } else {
        alert("Not enough money");
      }
    }
    function buy9inc() {
      if (clicks >= price5) {
        clicks -= price5;
        localStorage.clickAmount = clicks;
        counter.textContent -= price5;
        price5 *= 2;
        clickInc += 1000000000;
        localStorage.price = price;
        localStorage.inc = clickInc;
        incSpan.textContent = clickInc;
        buy5.textContent = price5;
      } else {
        alert("Not enough money");
      }
    }

    //Yay

    var increment = parseInt(localStorage.getItem("timeInc"));

    if (!localStorage.timeInc) {
      localStorage.timeInc = 0;
    }

    if (!localStorage.tprice) {
      localStorage.tprice = 100;
    }
    if (!localStorage.tprice2) {
      localStorage.tprice2 = 5000;
    }
    if (!localStorage.tprice3) {
      localStorage.tprice3 = 50000;
    }
    if (!localStorage.tprice4) {
      localStorage.tprice4 = 5000000;
    }
    if (!localStorage.tprice5) {
      localStorage.tprice5 = 5000000000;
    }
    var area1 = document.getElementById("t1");
    var area2 = document.getElementById("t2");
    var area3 = document.getElementById("t3");
    var area4 = document.getElementById("t4");
    var area5 = document.getElementById("t5");
    var timeArea = document.getElementById("time");
    var tprice = parseInt(localStorage.getItem("tprice")) || 100;
    var tprice2 = parseInt(localStorage.getItem("tprice2")) || 5000;
    var tprice3 = parseInt(localStorage.getItem("tprice3")) || 50000;
    var tprice4 = parseInt(localStorage.getItem("tprice4")) || 5000000;
    var tprice5 = parseInt(localStorage.getItem("tprice5")) || 5000000000;

    area1.textContent = tprice;
    time.textContent = increment;

    function time1() {
      if (clicks >= tprice) {
        clicks -= tprice;
        localStorage.clickAmount = clicks;
        counter.textContent -= tprice;
        tprice *= 2;
        increment += 1;
        localStorage.timeInc = increment;
        localStorage.tprice = tprice;
        timeArea.textContent = increment;
        area1.textContent = tprice;
      } else {
        alert("Not enough money!")
      }
    }
    function time2() {
      if (clicks >= tprice2) {
        clicks -= tprice2;
        localStorage.clickAmount = clicks;
        counter.textContent -= tprice2;
        tprice2 *= 2;
        increment += 100;
        localStorage.timeInc = increment;
        localStorage.tprice2 = tprice2;
        timeArea.textContent = increment;
        area2.textContent = tprice2;
      } else {
        alert("Not enough money!")
      }
    }
    function time3() {
      if (clicks >= tprice3) {
        clicks -= tprice3;
        localStorage.clickAmount = clicks;
        counter.textContent -= tprice3;
        tprice3 *= 2;
        increment += 10000;
        localStorage.timeInc = increment;
        localStorage.tprice3 = tprice3;
        timeArea.textContent = increment;
        area3.textContent = tprice3;
      } else {
        alert("Not enough money!")
      }
    }
    function time4() {
      if (clicks >= tprice4) {
        clicks -= tprice4;
        localStorage.clickAmount = clicks;
        counter.textContent -= tprice4;
        tprice4 *= 2;
        increment += 1000000;
        localStorage.timeInc = increment;
        localStorage.tprice4 = tprice4;
        timeArea.textContent = increment;
        area4.textContent = tprice4;
      } else {
        alert("Not enough money!")
      }
    }
    function time5() {
      if (clicks >= tprice5) {
        clicks -= tprice5;
        localStorage.clickAmount = clicks;
        counter.textContent -= tprice5;
        tprice5 *= 2;
        increment += 1000000000;
        localStorage.timeInc = increment;
        localStorage.tprice5 = tprice5;
        timeArea.textContent = increment;
        area5.textContent = tprice5;
      } else {
        alert("Not enough money!")
      }
    }
    clearTimeout();

    setInterval(() => {
      clicks += increment;
      counter.textContent = clicks;
      localStorage.setItem("clickAmount", clicks);
    }, 1000);

  </script>
</body>

</html>

<!---->

What I have tried:

I have tried changing the default values, asking chatGPT, and random other things

Posted 28-Apr-23 4:41am

Jude Hoekstra

Updated 28-Apr-23 6:58am

v3

Add a Solution

Comments

Member 15627495 28-Apr-23 10:50am

It's hard to understand where the problem is.
Because of not enough information

have you a piece of code to show here ? please.

Nan could be display if you set : begin_value = '0';
try the integer 0

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2023-04-28T04:52:00

NaN errors mean that something is trying to work with data that is "Not a Number" - that's where "NaN" comes from - but there are a huge number of ways that could occur, starting with "divide this number by zero" and working on up. Without your code (and I'm not following random links to get a copy) and running it (which I'm also not doing) there is no way for us to tell from your description what causes the problem or even what part of your code it's in - and even then, the problem may well be caused elsewhere and only show up a specific bit of code which assumes data is correct and valid when it isn't.

So the first thing to do is play your game over and over, and try to work out when it fails.
If you can make it fail in a repeatable way, then you can work out why it fails, and then you can work out a fix. But until then, you are guessing.