Javascript開啟html選擇選項-有解無憂

我一直在嘗試創建可以執行操作的腳本，例如在“p”標簽中寫一些東西。我在 html 中有 2 個選擇串列。我希望所有的東西都能互動，所以第一個串列中的每個元素與第二個串列中的每個元素都有不同的互動。我認為使用 switch 將是最有效的方法，但不能讓它作業

<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 onclick="press()">Click</button>
                <p id="aaa1">Placeholder</p>

var x = document.getElementById("imperial");
var i = x.selectedIndex;


function press() {
    
    if (document.getElementById("metric").getElementsByTagName("option")[0].selected) {
        
        switch (i); {
            case 0:
                document.getElementById("aaa1").innerHTML = "0";
                break;
            case 1:
                document.getElementById("aaa1").innerHTML = "1";
                break;
            case 2:
                document.getElementById("aaa1").innerHTML = "2";
                break;
            case 3:
                document.getElementById("aaa1").innerHTML = "3";
                break;
            default:
                document.getElementById("aaa1").innerHTML = "default";
        }
        
    }
}

之后我會有另一個 if with ("option")[1] 等。有人可以幫忙嗎？

uj5u.com熱心網友回復：

你會最終有一個很大的if和/或switch陳述句，如果你嘗試做每一個組合。而是將組合存盤在一個物件中，鍵是 2 個輸入的組合，值是您想要的任何輸出。像這樣的東西：

const config = {
 "kilometers": {
    "miles": "Convert km to mi",
    "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];
});

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

這種方法的有趣之處在于，該config物件中可以存盤的內容沒有限制，您可以在那里存盤一個方法參考，該方法參考將進行轉換，解釋為：

const config = {
 "kilometers": {
    "miles": km => km / 1.609,
    "yards": km => km / 1094,
    "feet": km => km / 3281,
    "inches": km => km / 39370
  },
  .....
}

現在，如果您有 KM 值，您可以獲取該配置并直接轉換為其他測量值之一

const metricValue = document.getElementById("metric").value; // eg. kilometers
const impValue = document.getElementById("imperial").value; //eg. miles

// have a numeric input somewhere to input the "from"
const fromValue = doucment.getElementById("valueInput").value

// get the converter function
const fn = config[metricValue][impValue];

// calculate the to result
const toResult = fn(fromValue);

uj5u.com熱心網友回復：

謝謝你的幫助，但我還有一個問題。由于某種原因，它不接受 inputPlace，它顯示 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/365885.html

標籤：javascript 功能 if 语句下拉式菜单切换语句

上一篇：解決迷宮的演算法陷入回圈

下一篇：在選擇檔案之前觸發onChange事件