如何在存储带有变量的对象的列表中选择一个值，该值使用这些变量之一通过用户输入字段计算总和？

How do I select a value in a list, which stores an object with variables, that uses one of these variables to calculate a sum via user input fields?

提问人：Ted 提问时间：7/27/2023 最后编辑：Mister JojoTed 更新时间：7/28/2023 访问量：34

问：

在 HTML 列表中，我做了 3 个选项，这些选项都应该链接到一个对象。这个对象包含不同的值，我想根据选择从中计算出另一个函数的总和。我一直在试图找出解决这个js问题的最简单方法，但我无法弄清楚。有什么好方法可以解决这个问题吗？提前致谢！

const lxaib = {
  bem: 647,
  bemcg: 2.112,
  crewcg: 2.05,
  paxcg: 2.993,
  bagcg: 3.627,
  fuelcg: 2.413,
}
// Just an example of working with the first object that should be related to the first list value

function getselectvalue() {
  var selectedvalue = document.getElementById("list").value;
  document.getElementById("test").innerHTML = selectedvalue;
}

function zfm() {
  bem = selectedvalue.bem; // I need to get the variable stored in the object based on the user selection here ... 
  crew = parseFloat(document.getElementById("crew").value);
  pax = parseFloat(document.getElementById("pax").value);
  bag = parseFloat(document.getElementById("baggage").value);
  zfm = bem + crew + pax + bag;
  document.getElementById("zfm").innerHTML = zfm;
}
<select name="airplanes" id="list" onchange="getselectvalue();">
  <option value="lxaib">LXAIB</option>
  <option value="lxaig">LXAIG</option>
  <option value="lxaif">LXAIF</option>
</select>
<br>
<input type="number" name="crew" id="crew" placeholder="crew">
<br>
<input type="number" name=" pax" id="pax" placeholder="pax">
<br>
<input type="number" name="baggage" id="baggage" placeholder="baggage">
<br>
<span id="test"></span>
<br>
<span id="zfm"></span>
<br>
<button onclick="zfm();">Calculate ZFM</button>

JavaScript HTML 函数 对象

评论

答：

1赞 Vishnudev Krishnadas 7/27/2023 #1

您可以将所有输入和按钮环绕在表单元素周围，然后侦听它的 submit 事件以提取所有值。示例如下：

const lxaib = {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993, 
    bagcg: 3.627, 
    fuelcg: 2.413, 
}

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    var selectedvalue =  document.getElementById("list").value;
    crew = parseFloat(document.getElementById("crew").value);
    pax = parseFloat(document.getElementById("pax").value);
    bag = parseFloat(document.getElementById("baggage").value);
    console.log(selectedvalue, crew, pax, bag);
    zfm = crew + pax + bag; 
    document.getElementById("zfm").innerHTML = zfm; 
});
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Code</title>
</head>
<body>
  <form>
    <select name="airplanes" id="list">
        <option value="lxaib">LXAIB</option>
        <option value="lxaig">LXAIG</option>
        <option value="lxaif">LXAIF</option>
    </select>
    <br>
    <input type="number" name="crew" id="crew" placeholder="crew">
    <br>
    <input type="number" name=" pax" id= "pax" placeholder="pax">
    <br>
    <input type="number" name="baggage" id="baggage" placeholder="baggage">
    <br>
    <span id="zfm"></span>
    <br>
    <button type="submit">Calculate!</button>
  </form>
</body>
</html>

1赞 imvain2 7/27/2023 #2

您的数据对象需要位于键与选择键匹配的对象中。

然后，通过括号表示法获取对象。

selected = data[selectedvalue];

此外，所选变量需要在函数外部声明，以便可以在其他函数中访问。

此外，最好使用事件侦听器而不是内联事件处理程序（如 onclick、onchange 等）

const data = {
  "lxaib": {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993,
    bagcg: 3.627,
    fuelcg: 2.413,
  },
  "lxaig": {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993,
    bagcg: 3.627,
    fuelcg: 2.413,
  },
  "lxaif": {
    bem: 647,
    bemcg: 2.112,
    crewcg: 2.05,
    paxcg: 2.993,
    bagcg: 3.627,
    fuelcg: 2.413,
  }
}

let selected;

function getselectvalue() {
  const selectedvalue = document.getElementById("list").value;
  selected = data[selectedvalue];
  document.getElementById("test").innerHTML = selectedvalue;
}

function zfm() {
  const bem = selected.bem; // I need to get the variable stored in the object based on the user selection here ... 
  const crew = parseFloat(document.getElementById("crew").value);
  const pax = parseFloat(document.getElementById("pax").value);
  const bag = parseFloat(document.getElementById("baggage").value);
  const zfm = bem + crew + pax + bag;
  document.getElementById("zfm").innerHTML = zfm;
}

getselectvalue();

const calc = document.querySelector(".calc");
const planes = document.querySelector("#list");

calc.addEventListener("click",zfm);
planes.addEventListener("change",getselectvalue);
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Code</title>
</head>

<body>
  <select name="airplanes" id="list">
    <option value="lxaib">LXAIB</option>
    <option value="lxaig">LXAIG</option>
    <option value="lxaif">LXAIF</option>
  </select>
  <br>
  <input type="number" name="crew" id="crew" placeholder="crew">
  <br>
  <input type="number" name=" pax" id="pax" placeholder="pax">
  <br>
  <input type="number" name="baggage" id="baggage" placeholder="baggage">
  <br>
  <span id="test"></span>
  <br>
  <span id="zfm"></span>
  <br>
  <button class="calc">Calculate ZFM</button>
</body>

</html>

1赞 Mister Jojo 7/27/2023 #3

我的建议：对在线文档
感兴趣 https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form

const
  myForm = document.querySelector('#my-form')
, airplanes_val = 
  { lxaig: { bem: 100 }
  , lxaif: { bem: 300 }
  , lxaib: 
    { bem    : 647
    , bemcg  : 2.112
    , crewcg : 2.05
    , paxcg  : 2.993
    , bagcg  : 3.627
    , fuelcg : 2.413
    } 
  };
myForm.onsubmit = e =>
  {
  e.preventDefault(); // disable form submiting

  myForm.respons.textContent 
    = airplanes_val[myForm.airplanes.value].bem
    + myForm.crew   .valueAsNumber    // use  .valueAsNumber property
    + myForm.pax    .valueAsNumber
    + myForm.baggage.valueAsNumber
    ;
  }
#my-form output { color: red; }
<form id="my-form">
  <select name="airplanes">   <!-- with a form element no needs to use id-->
    <option value="lxaib">LXAIB</option>
    <option value="lxaig">LXAIG</option>
    <option value="lxaif">LXAIF</option>
  </select>
  <br> <input type="number" name="crew"    placeholder="crew">
  <br> <input type="number" name="pax"     placeholder="pax">
  <br> <input type="number" name="baggage" placeholder="baggage">
  <br> <output              name="respons">...</output>
  <br> <button>Calculate ZFM</button>
</form>

上一个：修改对象中的值时出现问题

下一个：在 if 语句中定义对象/数据帧