在變數中乘以輸入值時出錯

我有 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>

（請只看第一個例子 - 公里到英里）如何解決？

uj5u.com熱心網友回復：

我想你有點誤解了我上次的回答。代碼有4個主要問題：

1. 存盤在config其中的值應該是方法
2. 您正在呼叫toFixed本質上是一個方法，而沒有每個人實際執行該方法來獲得結果
3. 在用戶有機會輸入任何內容之前，您正在讀取輸入的值。
4. 如果您想支持用戶輸入小數，請使用parseFloatnotparseInt

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>

注意：以上僅適用于選定的公里-英里，因為這是唯一具有有效功能的值！

uj5u.com熱心網友回復：

嗯，這個很簡單。在代碼的第一行中，您將獲得輸入的值，它是一個空字串（用戶尚未輸入任何內容！頁面加載后您正在執行該行），當您嘗試轉換時一個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>

標籤：javascript html 变量 输入 下拉式菜单

上一篇：如何將影像堆疊在文本上方？

下一篇：節點JS：錯誤：在TCP.onStreamRead處讀取ECONNRESET(node:internal/stream_base_commons:211:20)