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

我试图在我的网站上创建一个功能，在选择下拉菜单中的一个项目后，在输入框中打印出值。目前，我的代码可以工作，但太长了。下面是我想要缩短或存储在数据文件中的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”）{/code>行实际上又扩展了390行。
我会使用由
元素
索引的对象，其值是
#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]
    );
  }
}

您可以考虑使用类而不是IDS，这会使代码变得更简单：
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];
    });
  }
}


常量元素值={
甲烷：[190.6,45.99,0.012]，
乙烷：[305.3,48.72，'0.100']，//需要使用字符串作为尾随零
丙烷：[369.8,48.48,0.152]，
‘正丁烷’：[425.1,37.96，'0.200']，
// ...
}
函数下拉提示（元素）{
const possibleArr=elementValues[element]；
如果（可能的话）{
document.querySelectorAll（'.myText'）.forEach（（elm，i）=>{
elm.value=possiblearl[i]；
});
}
}



您可以将值添加到一个对象数组中，并像这样使用它
obj[element]['text']


var obj={
“甲烷”：{“文本”：“190.6”，“文本1”：“45.99”，“文本2”：“0.012”}，
“eethane”：{“text”：“305.3”，“text1”：“48.72”，“text2”：“0.100”}
}
函数下拉提示（元素）{
if（元素）{
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（“甲烷”）
很高兴听到您希望改进代码。您可以在新行中为每个产品创建.txt文件（例如
chmate 190.6 45.99 0.012
），然后按delimeter加载和拆分此文件（在我的示例空间中）。您也可以将静态数组或提供程序类用于所述数组。
['n-Butane']：
过度设计了。哦，我想是这样。我想一个大的多行字符串会更容易一些。不，我指的是一个没有变量的键的计算属性。所有代码都不起作用。第一个代码段最接近工作状态，但它只打印出“未定义”。@LunaPark我在问题中编辑了另一个代码段以演示-按“运行代码段”以查看它是否工作。例如，输入“甲烷”，其他输入填充
109.6
，
45.99
，
0.012