I've been trying to create script that will make an action, for example write something in a "p" tag. I have 2 select lists in html. I want to have everything with everything interaction, so every element from the first list has different interaction with every element in the second one. I think that using switch will be most efficient method, but can't make it work

<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";
        }
        
    }
}

After that I would have another if with ("option")[1] etc. Can someone help?

CodePudding user response：

You're going to end up with a lot of if and/or switch statements if you try to do every combination. Instead store the combinations in an object with the key as a combination of the 2 inputs and the value as whatever you want output. Something like this:

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The interesting thing about this approach, is there is no limit to what can be stored in that config object, you can store a method reference there which will do the conversion, to paraphrase:

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

Now if you had a KM value, you can get that config and convert directly to one of the other measurements

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 = document.getElementById("valueInput").value

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

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