javascript - 尝试从类中检索值时出现 NAN 错误？

Question

当我尝试从类方法 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

Answer 1

而不是设置 <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>