JavaScript 计算器 returns "NaN"

Question

我正在为我玩的游戏制作一个计算器，每当我运行它时，它只是 return 两个值的“NaN”，实际上只有一个值 return 应该如此。 return NaN 的两个值是通过 switch 语句运行的两个值，我发现您从 switch 语句中获得的值是未定义的，所以我认为这就是出错的地方。我试着在 Whosebug 上寻找其他类似的问题，我找到了一些，但他们的答案对我不起作用。

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>

Answer 1

主要问题是使用来自输入的字符串。进一步的效果是无法从 switch 语句中获取任何值，因为该值是一个字符串，并且在所有情况下，您都有数字。这里的比较是严格的，比如 ===.

对于未知值，您可以 return 函数并省略未给定值的计算。

'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>

JavaScript 计算器 returns "NaN"

JavaScript calculator just returns "NaN"

javascript

calculator