Result of the calculation resulting in NaN

Question

How could I fix the NaN error in the code below?

I already tried initializing the variables with 0 but it didn't work.

Ignore the CSS inside the tags, where work needs to be written like this...

This is the code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            function NotaFinal() {
                var n1 = parseFloat(document.getElementById("n1").value);
                var n2 = parseFloat(document.getElementById("n2").value);
                var ex = parseFloat(document.getElementById("ex").value);
                var MediaFinal = n1 + n2;
    
                if (ex > 0) {
                    if(MediaFinal > 2.75 && MediaFinal < 5.75) {
                    MediaFinal = (MediaFinal + (ex*2)) / 3
                    alert("A nota final é " + MediaFinal.toFixed(1));
                    }
                } else {
                    alert("A nota final é " + MediaFinal.toFixed(1));
                }
            }
    
            function Limpar() {
                document.getElementById("n1").value = "";
                document.getElementById("n2").value = "";
                document.getElementById("ex").value = "";
            }
            
        </script>
    </head>
    <body>
        <strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">N1</span></strong><input id="n1" type="number"><br><br>
        <strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">N2</span></strong><input id="n2" type="number"><br><br>
        <strong><span style="padding-top: 10px; font-family: Arial, Helvetica, sans-serif;">EX</span></strong><input id="ex" type="number"><br><br>
    
        <button onclick="NotaFinal()" style="background-color: #0C5BA1; color: #FFFFFF; border: none; padding: 2px; width:70px; margin-left: 23px;">Calcular</button>
        <button onclick="Limpar()" style="background-color: #0C5BA1; color: #FFFFFF; border: none; padding: 2px; width: 70px; margin-left: 20px;">Limpar</button>
    
    </body>
    </html>

try setting your `NotaFinal` variable to something else as it conflicts with your function name. — EpicPuppy613, Feb 06 '23 at 15:54
Also for logical "AND" it's `&&`, not `&`. The real answer to your question is that you should go into the debugger and find out what those local variables contain. — Pointy, Feb 06 '23 at 15:58
When `n1` changes, but nothing has yet been typed into `n2`, you get `NaN` because there's no `n2`, and `n1 + NaN` is `NaN`. — Pointy, Feb 06 '23 at 16:00
After fetching the current values, I'd add `if (isNaN(n1 + n2 + ex)) return;` because there's no point to the rest of the function if the values are incomplete. — Pointy, Feb 06 '23 at 16:02
Guys, I made the adjustments you indicated but the error persists. I understood what Pointy wrote, but I couldn't apply a solution based on that. I will continue to try. — Nícolas Nascimento, Feb 06 '23 at 18:14
@TachibanaShin, `parseFloat` of something that does not parse as a number will yield a NaN. example: `parseFloat('a')`. — Wyck, Feb 06 '23 at 18:51
When do you get the error? Are you inputting anything for n1, n2, and ex? Your code works fine (NaN only if relevant inputs are empty) in [this test fiddle](https://jsfiddle.net/gfuen3sk/). — FiddlingAway, Feb 06 '23 at 19:52
@TmTron, good point about the comma. By design it parses anything it can make sense of up at the beginning, and just stops at the comma, so `parseFloat('0,5')` is `0` but `parseFloat(',5')` is `NaN`. See [this answer](https://stackoverflow.com/questions/7571553/javascript-parse-float-is-ignoring-the-decimals-after-my-comma) for how to `parseFloat` with when there are commas being used as thousands separators or decimal separators. — Wyck, Feb 06 '23 at 21:11
Hello, It worked! I followed what Tachibana Shin suggested, but I made one change. It looked like this: `value.replace('', '0');` Thanks! <3 — Nícolas Nascimento, Feb 07 '23 at 20:23

Tachibana Shin · Accepted Answer · 2023-02-07T07:42:43.047

based on @wck's error reproduction:

As you can see (1), (2), (3) I have added .replace(',', '.') to replace the first ,found with a dot.according to the standard about type of programming language if there are two signs,` then it is no longer a number and will return NaN

function NotaFinal() {
  var n1 = parseFloat(document.getElementById("n1").value.replace(',', '.')); // (1)
  var n2 = parseFloat(document.getElementById("n2").value.replace(',', '.')); // (2)
  var ex = parseFloat(document.getElementById("ex").value.replace(',', '.')); // (3)
  var MediaFinal = n1 + n2;
    
  if (ex > 0) {
    if (MediaFinal > 2.75 && MediaFinal < 5.75) {
      MediaFinal = (MediaFinal + (ex*2)) / 3
      alert("A nota final é " + MediaFinal.toFixed(1));
    }
  } else {
    alert("A nota final é " + MediaFinal.toFixed(1));
  }
}

Please add some explanation to your answer such that others can learn from it. What did you change, and why? — Nico Haase, Feb 07 '23 at 07:38

Result of the calculation resulting in NaN

1 Answers1