英文:
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?
问题
在HTML列表中，我创建了3个选项，它们都应与一个对象关联。这个对象包含不同的值，我想根据选择在后续函数中计算总和。我一直在尝试找出解决这个JavaScript问题的最简单方法，但我无法弄清楚。是否有解决这个问题的好方法？提前谢谢！
const lxaib = {
bem: 647,
bemcg: 2.112,
crewcg: 2.05,
paxcg: 2.993,
bagcg: 3.627,
fuelcg: 2.413,
}
// 只是一个与应与第一个列表值相关的对象一起工作的示例
function getselectvalue() {
var selectedvalue = document.getElementById("list").value;
document.getElementById("test").innerHTML = selectedvalue;
}
function zfm() {
var selectedvalue = document.getElementById("list").value; // 获取用户选择的值
var bem = lxaib[selectedvalue]; // 根据用户选择获取对象中存储的变量
var crew = parseFloat(document.getElementById("crew").value);
var pax = parseFloat(document.getElementById("pax").value);
var bag = parseFloat(document.getElementById("baggage").value);
var 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>
英文:
In a HTML list, I have made 3 options, those should be all linked to an object. This object houses different values, from which I want to calculate a sum in a further function, based on the selection. I have been trying to figure out the easiest way to approach this js problem, but I cannot figure it out. Is there any good way to solve this issue? Thanks in advance!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
你可以将所有的输入和按钮包裹在一个表单元素中，然后监听其提交事件以提取所有的值。以下是示例：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
You can wrap all the inputs and the button around a form element and then listen to it's submit event to extract all the values. Here's the example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 1
您的数据对象需要包含与选择匹配的键的对象中。
然后，您可以使用方括号表示法获取对象。
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; // 我需要根据用户在此处选择的变量来获取对象中存储的变量...
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);
希望这对您有所帮助。
英文:
Your data object will need to be in an object with the keys matching that of the select.
Then you get the object via bracket notation.
selected = data[selectedvalue];
Also, the selected variable will need to be declared outside of the function so that it can be access within the other functions.
Also it is best to use event listeners not inline event handlers (like onclick, onchange etc)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案3
得分: 1
我的建议：对在线文档产生兴趣，链接如下：
https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
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(); // 禁止表单提交
myForm.respons.textContent
= airplanes_val[myForm.airplanes.value].bem
+ myForm.crew .valueAsNumber // 使用 .valueAsNumber 属性
+ myForm.pax .valueAsNumber
+ myForm.baggage.valueAsNumber
;
}
<!-- 语言: lang-css -->
#my-form output { color: red; }
<!-- 语言: lang-html -->
<form id="my-form">
<select name="airplanes"> <!-- 使用表单元素无需使用 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>
<!-- 结束代码片段 -->
这是您提供的代码的翻译部分。
英文:
my advice: take an interest in the online documentation
https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
;
}
<!-- language: lang-css -->
#my-form output { color: red; }
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论