如何缩短代码或将其存储在数据文件中

Question

I am trying to create a feature on my website that prints out values in input boxes after an item from the dropdown menu is selected. Currently, my code works, but it is just too lengthy. Below is the JavaScript code that I would like to shorten or stored in a data file.

function dropdownTip(element){

      if(element == "Methane") {
        document.getElementById("myText").value="190.6";
        document.getElementById("myText1").value="45.99";
        document.getElementById("myText2").value="0.012";
      }
      else if(element == "Ethane") {
        document.getElementById("myText").value="305.3";
        document.getElementById("myText1").value="48.72";
        document.getElementById("myText2").value="0.100";
      }
      else if(element == "Propane") {
        document.getElementById("myText").value="369.8";
        document.getElementById("myText1").value="48.48";
        document.getElementById("myText2").value="0.152";
      }
      else if(element == "n-Butane") {
        document.getElementById("myText").value="425.1";
        document.getElementById("myText1").value="37.96";
        document.getElementById("myText2").value="0.200";
      }
      else if(element == "n-Pentane") {
        document.getElementById("myText").value="469.7";
        document.getElementById("myText1").value="33.70";
        document.getElementById("myText2").value="0.252";
      }
      else if(element == "n-Hexane") {
        document.getElementById("myText").value="507.6";
        document.getElementById("myText1").value="30.25";
        document.getElementById("myText2").value="0.301";
      }
      else if(element == "n-Heptane") {
        document.getElementById("myText").value="540.2";
        document.getElementById("myText1").value="27.40";
        document.getElementById("myText2").value="0.350";
      }
      else if(element == "n-Octane") {
        document.getElementById("myText").value="568.7";
        document.getElementById("myText1").value="24.90";
        document.getElementById("myText2").value="0.400";
      }
      else if(element == "n-Nonane") {
        document.getElementById("myText").value="594.6";
        document.getElementById("myText1").value="22.90";
        document.getElementById("myText2").value="0.444";
      }
      else if(element == "n-Decane") {
        document.getElementById("myText").value="617.7";
        document.getElementById("myText1").value="21.10";
        document.getElementById("myText2").value="0.492";
      }

The code is actually way longer than this. The else if(element== "x") {} lines actually extend for another 390 lines.

Answer 1

I'd use an object indexed by element , whose values are arrays of #myText , #myText1 , #myText2 values:

const elementValues = {
  Methane: [190.6, 45.99, 0.012],
  Ethane: [305.3, 48.72, '0.100'], // you'll need to use strings for trailing zeros
  Propane: [369.8, 48.48, 0.152],
  'n-Butane': [425.1, 37.96, '0.200'],
  // ...
}
function dropdownTip(element){
  const possibleArr = elementValues[element];
  if (possibleArr) {
    ['myText', 'myText1', 'myText2'].forEach(
      (id, i) => document.getElementById(id).value = possibleArr[i]
    );
  }
}

You might consider using classes instead of IDs, which would make the code a bit simpler:

const elementValues = {
  Methane: [190.6, 45.99, 0.012],
  Ethane: [305.3, 48.72, '0.100'], // you'll need to use strings for trailing zeros
  Propane: [369.8, 48.48, 0.152],
  'n-Butane': [425.1, 37.96, '0.200'],
  // ...
}
function dropdownTip(element){
  const possibleArr = elementValues[element];
  if (possibleArr) {
    document.querySelectorAll('.myText').forEach((elm, i) => {
      elm.value = possibleArr[i];
    });
  }
}

 const elementValues = { Methane: [190.6, 45.99, 0.012], Ethane: [305.3, 48.72, '0.100'], // you'll need to use strings for trailing zeros Propane: [369.8, 48.48, 0.152], 'n-Butane': [425.1, 37.96, '0.200'], // ... } function dropdownTip(element){ const possibleArr = elementValues[element]; if (possibleArr) { document.querySelectorAll('.myText').forEach((elm, i) => { elm.value = possibleArr[i]; }); } }

 <input onchange="dropdownTip(this.value)"> <br> <input class="myText"></div> <input class="myText"></div> <input class="myText"></div>

If you don't like the bracket notation, another option is to write a long multiline string, which you transform into an object afterwards:

const elementValuesStr = `
Methane 190.6 45.99 0.012
Ethane 305.3 48.72, 0.100
Propane 369.8 48.48 0.152
n-Butane 425.1 37.96, 0.200
...
`;
const elementValues = elementValuesStr
  .trim()
  .split('\n')
  .reduce((a, line) => {
    const [key, ...vals] = line.match(/\S+/g);
    a[key] = vals;
    return a;
  }, {});

And then you can use the same code as above, using elementValues .

 const elementValuesStr = ` Methane 190.6 45.99 0.012 Ethane 305.3 48.72, 0.100 Propane 369.8 48.48 0.152 n-Butane 425.1 37.96, 0.200 `; const elementValues = elementValuesStr .trim() .split('\\n') .reduce((a, line) => { const [key, ...vals] = line.match(/\\S+/g); a[key] = vals; return a; }, {}); console.log(elementValues);

Answer 2

You can add the values in a array of objects and use it something like this obj[element]['text']

 var obj = { "methane" : {"text":"190.6","text1":"45.99","text2":"0.012"}, "eethane" : {"text":"305.3","text1":"48.72","text2":"0.100"} } function dropdownTip(element){ if(element) { console.log(obj[element]['text'],obj[element]['text1'],obj[element]['text2']); /*document.getElementById("myText").value=obj[element]['text']; document.getElementById("myText1").value=obj[element]['text1']; document.getElementById("myText2").value=obj[element]['text2'];*/ } } dropdownTip("methane")