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

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 到 mi）如何解决？

Answer 1

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

Answer 2

我认为您有点误解了我的。代码主要有4个问题：

存储在config中的值应该是方法
您正在调用 toFixed 本质上是一个方法，而没有实际执行该方法以获得结果
您正在读取用户输入任何内容之前的输入值。
如果要支持用户输入小数，请使用 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>

注意：以上仅适用于选择的千米-英里，因为这是唯一具有有效函数值的选项！

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

Error when multiplying input value in a variable

html

javascript

variables

input

drop-down-menu