Как сократить код или сохранить его в файле данных

Question

Я пытаюсь создать на своем веб-сайте функцию, которая распечатывает значения в полях ввода после выбора элемента в раскрывающемся меню.В настоящее время мой код работает, но он слишком длинный.Ниже приведен код JavaScript, который я хотел бы сократить или сохранить в файле данных.

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

Код на самом деле намного длиннее, чем этот.else if(element== "x") {} строки фактически расширяются еще на 390 строк.

Answer 1

Вы можете добавить значения в массив объектов и использовать его примерно так 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")

Answer 2

Я бы использовал объект, индексированный как element, значения которого являются массивами #myText, #myText1, #myText2 значений:

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]
    );
  }
}

Вы могли бы рассмотреть использование классов вместо идентификаторов, что сделало бы код немного проще:

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>

Если вам не нравятся скобочные обозначения, другой вариант - написать длинную многострочную строку, которую вы впоследствии преобразуете в объект:

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;
  }, {});

И тогда вы можете использовать тот же код, что и выше, используя 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);