在变量中乘以输入值时出错

Question

我有 2 个列表（从公里转换为英里等）。当我尝试使用输入值进行计算时（所以“X * 1.609”代表公里到英里）我有一个错误 NaN。

const inputPlace = parseInt(document.getElementById("inputPlace").value);

const config = {
 "kilometers": {
    "miles": inputPlace * 1.609,
    "yards": "Convert km to yd",
    "feet": "Convert km to ft",
    "inches": "Convert km to in"
  },
  "meters": {
    "miles": "Convert m to mi",
    "yards": "Convert m to yd",
    "feet": "Convert m to ft",
    "inches": "Convert m to in"
  },
  "centimeters": {
    "miles": "Convert cm to mi",
    "yards": "Convert cm to yd",
    "feet": "Convert cm to ft",
    "inches": "Convert cm to in"
  },
  "milimeters": {
    "miles": "Convert mm to mi",
    "yards": "Convert mm to yd",
    "feet": "Convert mm to ft",
    "inches": "Convert mm to in"
  }
}

document.getElementById("btn").addEventListener("click", function(){
   const metricValue = document.getElementById("metric").value;
   const impValue = document.getElementById("imperial").value;
   
   document.getElementById("aaa1").innerHTML = config[metricValue][impValue].toFixed(2);
});

              <input type="number" id="inputPlace">
                
                <select name="metric" id="metric">
                  <option value="kilometers">km</option>
                  <option value="meters">m</option>
                  <option value="centimeters">cm</option>
                  <option value="milimeters">mm</option>
                </select>

                <select name="imperial" id="imperial">
                  <option value="miles">mi</option>
                  <option value="yards">yd</option>
                  <option value="feet">ft</option>
                  <option value="inches">in</option>
                </select>

                <button id="btn">Click</button>
                <p id="aaa1">Placeholder</p>

（请只看第一个例子 - km to mi） 如何解决？

Answer 1

我想你有点误解了我的last answer。代码有4个主要问题：

1. config 中存储的值应该是方法
2. 您调用 toFixed 的方法本质上是一种方法，但实际上并未执行该方法以获得结果
3. 在用户有机会输入任何内容之前，您正在读取输入的值。
4. 如果您想支持用户输入小数，请使用parseFloat 而不是parseInt

const config = {
  "kilometers": {
    "miles": v => v * 1.609,
    "yards": "Convert km to yd",
    "feet": "Convert km to ft",
    "inches": "Convert km to in"
  },
  "meters": {
    "miles": "Convert m to mi",
    "yards": "Convert m to yd",
    "feet": "Convert m to ft",
    "inches": "Convert m to in"
  },
  "centimeters": {
    "miles": "Convert cm to mi",
    "yards": "Convert cm to yd",
    "feet": "Convert cm to ft",
    "inches": "Convert cm to in"
  },
  "milimeters": {
    "miles": "Convert mm to mi",
    "yards": "Convert mm to yd",
    "feet": "Convert mm to ft",
    "inches": "Convert mm to in"
  }
}

document.getElementById("btn").addEventListener("click", function() {
  const metricValue = document.getElementById("metric").value;
  const impValue = document.getElementById("imperial").value;
  const inputPlace = parseFloat(document.getElementById("inputPlace").value);
  
  const fn = config[metricValue][impValue];
  document.getElementById("aaa1").innerHTML = fn(inputPlace).toFixed(2);
});

<input type="number" id="inputPlace">

<select name="metric" id="metric">
  <option value="kilometers">km</option>
  <option value="meters">m</option>
  <option value="centimeters">cm</option>
  <option value="milimeters">mm</option>
</select>

<select name="imperial" id="imperial">
  <option value="miles">mi</option>
  <option value="yards">yd</option>
  <option value="feet">ft</option>
  <option value="inches">in</option>
</select>

<button id="btn">Click</button>
<p id="aaa1">Placeholder</p>

注意：以上内容仅适用于选择的公里-英里，因为这是唯一具有有效功能的值！

Answer 2

嗯，这个很简单。在代码的第一行中，您将获得输入的值，它是一个空白字符串（用户尚未输入任何内容！页面加载后您正在执行该行），当您尝试转换时到 int 会导致“不是数字”。相反，您应该在按下click 按钮 时获取数字的值，而不是在页面加载后（您还必须创建一个函数来动态计算该值）：

function calc(value) {
  // creating a function to re-calculate the value
  const config = {
    "kilometers": {
      "miles": value * 1.609,
      "yards": "Convert km to yd",
      "feet": "Convert km to ft",
      "inches": "Convert km to in"
    },
    "meters": {
      "miles": "Convert m to mi",
      "yards": "Convert m to yd",
      "feet": "Convert m to ft",
      "inches": "Convert m to in"
    },
    "centimeters": {
      "miles": "Convert cm to mi",
      "yards": "Convert cm to yd",
      "feet": "Convert cm to ft",
      "inches": "Convert cm to in"
    },
    "milimeters": {
      "miles": "Convert mm to mi",
      "yards": "Convert mm to yd",
      "feet": "Convert mm to ft",
      "inches": "Convert mm to in"
    }
  }
  return config;
}

document.getElementById("btn").addEventListener("click", function() {
  const metricValue = document.getElementById("metric").value;
  const impValue = document.getElementById("imperial").value;
  const inputPlace = parseInt(document.getElementById("inputPlace").value.replaceAll(",", "").replaceAll(" ", ""));

  document.getElementById("aaa1").innerHTML = calc(inputPlace)[metricValue][impValue].toFixed(2); // calling a function that returns an object instead of just using the object
});

<input type="number" id="inputPlace">

<select name="metric" id="metric">
  <option value="kilometers">km</option>
  <option value="meters">m</option>
  <option value="centimeters">cm</option>
  <option value="milimeters">mm</option>
</select>

<select name="imperial" id="imperial">
  <option value="miles">mi</option>
  <option value="yards">yd</option>
  <option value="feet">ft</option>
  <option value="inches">in</option>
</select>

<button id="btn">Click</button>
<p id="aaa1">Placeholder</p>