JavaScript calculator just returns "NaN"
Question
I'm making a calculator for a game I play and whenever I run it, it just returns "NaN" for two values, only one of the values actually returns as it should. The two values that return NaN are the ones that run through switch statements and I found that the values you get from the switch statements are undefined so I think that's where it goes wrong. I tried looking for other questions like this on StackOverflow and I found some but their answers didn't work for me.
var iron_cost = 0 var string_cost = 0 var spider_e_cost = 0 var tami_1_amount = 0 var tami_2_amount = 0 var tami_1_tier = 0 var tami_2_tier = 0 var ta_per_min_1 = 0 var ta_per_min_2 = 0 var cpt_tpc = 0 var cph_tpc = 0 var cpd_tpc = 0 function calculate_tpc() { var string_cost = document.getElementById("string_tpc").value; var spider_e_cost = document.getElementById("spider_eye_tpc").value; var iron_cost = document.getElementById("iron_tpc").value; var tami_1_tier = document.getElementById("minions_tier_1_tpc").value; var tami_2_tier = document.getElementById("minions_tier_2_tpc").value; var tami_1_amount = document.getElementById("minions_1_tpc").value; var tami_2_amount = document.getElementById("minions_2_tpc").value; var step1 = string_cost * 3.16; var step2 = iron_cost * 0.2; var step3 = step1 + step2 + spider_e_cost; switch (tami_1_tier) { case 1: var ta_per_min_1 = 2; break; case 2: var ta_per_min_1 = 2; break; case 3: var ta_per_min_1 = 2.3; break; case 4: var ta_per_min_1 = 2.3; break; case 5: var ta_per_min_1 = 2.6; break; case 6: var ta_per_min_1 = 2.6; break; case 7: var ta_per_min_1 = 3.15; break; case 8: var ta_per_min_1 = 3.15; break; case 9: var ta_per_min_1 = 4.1; break; case 10: var ta_per_min_1 = 4.1; break; case 11: var ta_per_min_1 = 6; break; } switch (tami_2_tier) { case 1: var ta_per_min_2 = 2; break; case 2: var ta_per_min_2 = 2; break; case 3: var ta_per_min_2 = 2.3; break; case 4: var ta_per_min_2 = 2.3; break; case 5: var ta_per_min_2 = 2.6; break; case 6: var ta_per_min_2 = 2.6; break; case 7: var ta_per_min_2 = 3.15; break; case 8: var ta_per_min_2 = 3.15; break; case 9: var ta_per_min_2 = 4.1; break; case 10: var ta_per_min_2 = 4.1; break; case 11: var ta_per_min_2 = 6; break; } var step4 = ta_per_min_1 * tami_1_amount; var step5 = ta_per_min_2 * tami_2_amount; var step6 = step4 + step5; var step7 = step6 * step3; var step8 = step7 * 60; var step9 = step8 * 24; document.getElementById("cpt_tpc").innerHTML = step3; document.getElementById("cph_tpc").innerHTML = step8; document.getElementById("cpd_tpc").innerHTML = step9; document.getElementById("test1").innerHTML = ta_per_min_1; document.getElementById("test2").innerHTML = ta_per_min_2; }
html, body { text-align: center; };
<html> <head> <link rel="stylesheet" type="text/css" href="interface.css" /> <body> <h1>Calculator</h1> <br /> String Price: <input type="text" id="string_tpc" value="0"> <br /> Spider Eye Price: <input type="text" id="spider_eye_tpc" value="0"> <br /> Iron Price: <input type="text" id="iron_tpc" value="0"> <br /> Minions Tier 1: <input type="text" id="minions_tier_1_tpc" value="0"> Minion Amount 1: <input type="text" id="minions_1_tpc" value="0"> <br /> Minions Tier 2: <input type="text" id="minions_tier_2_tpc" value="0"> Minion Amount 2: <input type="text" id="minions_2_tpc" value="0"> <br /> <button onclick="calculate_tpc()">Calculate</button> <br /> Current Coins per Tarantula: <span id="cpt_tpc">0</span> <br /> Coins per hour: <span id="cph_tpc">0</span> <br /> Coins per day: <span id="cpd_tpc">0</span> <script type="text/javascript" src="main.js"></script> </body> </head> </html>
1 answers
solution1
0 ACCPTED 2021-05-08 14:49:22
The main problem is to use strings from input. The further effect is to get no values from the switch statements, because the value is a string and in all cases, you have numbers. The comparison is here strict, like === .
For unknown values, you could return the function and omit calculation with not given values.
'use strict'; function calculate_tpc() { var string_cost = +document.getElementById("string_tpc").value; var spider_e_cost = +document.getElementById("spider_eye_tpc").value; var iron_cost = +document.getElementById("iron_tpc").value; var tami_1_tier = +document.getElementById("minions_tier_1_tpc").value; var tami_2_tier = +document.getElementById("minions_tier_2_tpc").value; var tami_1_amount = +document.getElementById("minions_1_tpc").value; var tami_2_amount = +document.getElementById("minions_2_tpc").value; var step1 = string_cost * 3.16; var step2 = iron_cost * 0.2; var step3 = step1 + step2 + spider_e_cost, ta_per_min_1, ta_per_min_2; switch (tami_1_tier) { case 1: case 2: ta_per_min_1 = 2; break; case 3: case 4: ta_per_min_1 = 2.3; break; case 5: case 6: ta_per_min_1 = 2.6; break; case 7: case 8: ta_per_min_1 = 3.15; break; case 9: case 10: ta_per_min_1 = 4.1; break; case 11: ta_per_min_1 = 6; break; default: return; } switch (tami_2_tier) { case 1: case 2: ta_per_min_2 = 2; break; case 3: case 4: ta_per_min_2 = 2.3; break; case 5: case 6: ta_per_min_2 = 2.6; break; case 7: case 8: ta_per_min_2 = 3.15; break; case 9: case 10: ta_per_min_2 = 4.1; break; case 11: ta_per_min_2 = 6; break; default: return; } var step4 = ta_per_min_1 * tami_1_amount; var step5 = ta_per_min_2 * tami_2_amount; var step6 = step4 + step5; var step7 = step6 * step3; var step8 = step7 * 60; var step9 = step8 * 24; document.getElementById("cpt_tpc").innerHTML = step3; document.getElementById("cph_tpc").innerHTML = step8; document.getElementById("cpd_tpc").innerHTML = step9; //document.getElementById("test1").innerHTML = ta_per_min_1; //document.getElementById("test2").innerHTML = ta_per_min_2; }
<h1>Calculator</h1> <br /> String Price: <input type="text" id="string_tpc" value="0"> <br /> Spider Eye Price: <input type="text" id="spider_eye_tpc" value="0"> <br /> Iron Price: <input type="text" id="iron_tpc" value="0"> <br /> Minions Tier 1: <input type="text" id="minions_tier_1_tpc" value="0"> Minion Amount 1: <input type="text" id="minions_1_tpc" value="0"> <br /> Minions Tier 2: <input type="text" id="minions_tier_2_tpc" value="0"> Minion Amount 2: <input type="text" id="minions_2_tpc" value="0"> <br /> <button onclick="calculate_tpc()">Calculate</button> <br /> Current Coins per Tarantula: <span id="cpt_tpc">0</span> <br /> Coins per hour: <span id="cph_tpc">0</span> <br /> Coins per day: <span id="cpd_tpc">0</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JavaScript calculator NaN
JavaScript calculator displays NaN
Javascript parseFloat() sometimes returns NaN - Possibly just on older versions of Firefox
Change NaN to Error in JavaScript calculator
Getting NaN as output in Javascript Calculator
Average Calculator for an Array (null arguments returns NaN)
React function mortgage calculator returns NAN
Javascript closures returns NaN?
Javascript subtraction returns NaN
Javascript Timer returns NaN
Related Tags