当我尝试从类方法 map().reduce() 时收到“NAN”错误。
提交表单时,所有值都会动态更新。
我想为每个单独的 Waiter 类存储和添加价格值,并将其存储在 Waiter 总数中。
我不确定问题出在提交表单的函数还是类方法 addFood 上。
我尝试了几种 pasrseInt() 方法,但不确定语法是否正确。
/*
//Waiters Section
*/
//Waiter Constructor
class Waiter{
constructor (name){
this.name = name;
this.order = [];
this.total = 0;
}
//function to map() the price argument
//and then reduce() to get the total
addFood (item){
this.order.push(item);
this.total = this.order.map(o => o.price).reduce((a, b) => a + b, 0);
}
};
//Array to store waiters
const waiters = [
new Waiter('Timo'),
new Waiter('Lucian'),
new Waiter('Arpi')
];
const waitersEl = document.getElementById('waiters');
//Adding the waiters to the options menu
waiters.forEach(({name}) => waitersEl.options.add(new Option(name)));
/*
//Food Section Main
*/
//Food Constructor
class Item {
constructor (item, price) {
this.item = item;
this.price = price;
this.label = `${item} (${price})`;
}
}
//Main food array
const mainFood = [
new Item ('Peene Primvera', 14),
new Item("Lasagne", 14),
new Item("Fillet Steak", 20)
];
const foodMain = document.getElementById('menuMain');
//Addin the options for each food and price item inside the dropdown menu
mainFood.forEach(({label, item }) => foodMain.options.add(new Option(label, label)));
/*
//Fucntion for when the form is submited it adds the
*/
const formEl = document.getElementById('mainForm');
formEl.onsubmit = function (e){
//Selecting the choosen index from the user food and which waiter orderd //it which waiter
const foodItem = foodMain.options[foodMain.selectedIndex].value;
const waiterName = waitersEl.options[waitersEl.selectedIndex].value;
const waiter = waiters.find(({ name }) => name === waiterName);
//Logic to check when submited if both feilds are true proceed
if (waiter && foodItem) {
//Calling the function addFood from the Waiter
//class to push the selection to the orders array
//and then reduce it and put the total in the total argument
waiter.addFood(foodItem);
console.log(waiters);
};
return false; // prevents redirect/refresh
};
<form id="mainForm" action="#">
<select id="menuMain" name="foodOrder">
</select>
<select id="waiters" name="waiterSelection">
</select>
<input type="submit" value="Submit">
</form>
这是我提交通知后现在得到的总数:NAN:
0: Waiter
addFood: ƒ (item)
name: "Timo"
order: ["Peene Primvera (14.5)", "Peene Primvera (14.5)"]
total: NaN
我想要的结果是:
0: Waiter
addFood: ƒ (item)
name: "Timo"
order: ["Peene Primvera (14.5)", "Peene Primvera (14.5)"]
total: 29
最佳答案
而不是设置 <option>
s 值到 Item
的标签将其设置为 Item
在 mainFood
中的索引数组,这样很容易得到Item
与所选 <option>
关联的对象.
这是一个例子:
mainFood.forEach(({label, item }, index) => foodMain.options.add(new Option(label, index)));
然后:
const foodItemIndex = foodMain.options[foodMain.selectedIndex].value;
const foodItem = mainFood[foodItemIndex];
这是一个工作版本:
class Waiter {
constructor(name) {
this.name = name;
this.order = [];
this.total = 0;
}
addFood(item) {
this.order.push(item);
this.total = this.order.map(o => o.price).reduce((a, b) => a + b, 0);
}
};
const waiters = [
new Waiter('Timo'),
new Waiter('Lucian'),
new Waiter('Arpi')
];
const waitersEl = document.getElementById('waiters');
waiters.forEach(({
name
}) => waitersEl.options.add(new Option(name)));
class Item {
constructor(item, price) {
this.item = item;
this.price = price;
this.label = `${item} (${price})`;
}
}
const mainFood = [
new Item('Peene Primvera', 14),
new Item("Lasagne", 14),
new Item("Fillet Steak", 20)
];
const foodMain = document.getElementById('menuMain');
mainFood.forEach(({
label,
item
}, index) => foodMain.options.add(new Option(label, index)));
const formEl = document.getElementById('mainForm');
formEl.onsubmit = function(e) {
const foodItemIndex = foodMain.options[foodMain.selectedIndex].value;
const foodItem = mainFood[foodItemIndex];
const waiterName = waitersEl.options[waitersEl.selectedIndex].value;
const waiter = waiters.find(({
name
}) => name === waiterName);
if (waiter && foodItem) {
waiter.addFood(foodItem);
console.log(waiters);
};
return false; // prevents redirect/refresh
};
<form id="mainForm" action="#">
<select id="menuMain" name="foodOrder">
</select>
<select id="waiters" name="waiterSelection">
</select>
<input type="submit" value="Submit">
</form>
关于javascript - 尝试从类中检索值时出现 NAN 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57434756/