jQuery NaN Result

Question

I'm trying to create a simple calculator using jQuery and been stick with the NaN result for a few hours now. Not sure what i'm missing or where i made a mistake. Basically i just want to multiply 2 input fields.

A help would be great!

var b = jQuery('input[name="mpfc-not-f"]').val();
var c = jQuery('input[name="atv-f"]').val();
total_rev = 0;
total_rev = Math.round(b * c);
totals_rev = total_rev.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1,");

jQuery(".over-total").text(totals_rev);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="0" name=" mpfc-not-f" class="mpfc-not"/>
<input type="text" value="0" name="atv-f" class="atv"/>
<p class="over-total">0</p>

At the time your code runs, there's no value in the inputs. Notice also an extra space in the name of the first input, that's actually the reason causing NaN (empty strings are automatically converted to zero when using as an operand of `*` operator). — Teemu, Jun 25 '20 at 11:37
omg, that extra space fixed the NaN issue. but i still get 0 as result. the initial value is 0 as indicated in the html code, wouldnt that set the initial value? also, ive added a document ready function — Jeremi Liwanag, Jun 25 '20 at 12:27
Umm ... yes, you're gettig `0 * 0`. If you want to do the math with user entered values, you need a button which can be clicked after user has entered the values. — Teemu, Jun 25 '20 at 12:29
I see, since the NaN issue has been fixed and i got a few more questions - is it alright to ask them here? — Jeremi Liwanag, Jun 25 '20 at 12:35
i guess to add the initial value that can be done thorugh html? value = "100" but how can i make it auto calculate - as of now even i change the value in the text field the product is still the same. wont update — Jeremi Liwanag, Jun 25 '20 at 12:39
jQuery("input").on("change input", function(e) { GOT ITT!! thanks yall! — Jeremi Liwanag, Jun 25 '20 at 12:51
Does this answer your question? [Detecting input change in jQuery?](https://stackoverflow.com/questions/6458840/detecting-input-change-in-jquery) — user120242, Jun 25 '20 at 12:53

score 0 · Answer 1 · answered Jun 25 '20 at 11:46

0

try using:

jquery(document).ready(() => {

var b = jQuery('input[name="mpfc-not-f"]').val();
var c = jQuery('input[name="atv-f"]').val();
total_rev = 0;
total_rev = Math.round(b * c);
totals_rev = total_rev.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1,");

jQuery(".over-total").text(totals_rev);


});

answered Jun 25 '20 at 11:46

Andrey

146
1
2
8

unfortunately still NaN – Jeremi Liwanag Jun 25 '20 at 11:53
try to add parseInt() function on 'b' and 'c' variables. Then try to call ' let total_rev = '. – Andrey Jun 25 '20 at 12:00
Get the Devtools up with F12 and put a break in the code and see what's happening as b and c are loaded. One of them must not be getting a numeric value, like ""?. – Nikkorian Jun 25 '20 at 12:08
Also, as @Teemu said, this will all run as soon as the doc is loaded. What are the values in the inputs at that point? Are you sure you don't want to delay the calculation until some data has been entered? In which case you'll need to put all that code into a function and create a way to trigger its activation. – Nikkorian Jun 25 '20 at 12:12

score 0 · Answer 2 · answered Jun 25 '20 at 12:55

Try this

function mul(){
  var b = jQuery('input[name="mpfc-not-f"]').val();
  var c = jQuery('input[name="atv-f"]').val();
  total_rev = 0;
  total_rev = Math.round(b * c);
  totals_rev = total_rev.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1,");
  jQuery(".over-total").text(totals_rev);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="0" name="mpfc-not-f" class="mpfc-not"/>
<input type="text" value="0" name="atv-f" class="atv"/>
<p class="over-total">0</p>
<button onclick="mul()">Multiply</button>

Jakub Ujvvary · Answer 3 · 2020-06-29T07:25:26.563

Maybe this helps You

function doMath(){
  let multiply_result =  $("#numberA").val() * $("#numberB").val();
  console.log(multiply_result);
  return multiply_result;
}

$(".number").change(function(){
  let result = doMath();
  jQuery(".over-total").text(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="numberA" value="0" name=" mpfc-not-f" class="mpfc-not number"/>
<input type="text" id="numberB" value="0" name="atv-f" class="atv number"/>
<p class="over-total">0</p>
</div>

jQuery NaN Result

3 Answers3