微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript 计算器只返回“NaN”

如何解决JavaScript 计算器只返回“NaN”

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

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>

解决方法

主要问题是使用输入中的字符串。进一步的效果是不会从 switch 语句中获取任何值,因为该值是一个字符串,并且在所有情况下,您都有数字。此处的比较是严格的,例如 ===

对于未知值,您可以返回函数并省略未给定值的计算。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。