将新对象添加到对象数组javascript

Question

I solved this. you are right I was running a function which was the problem. If anyone wants to look at the solution I have attached it below. This was never meant to look nice just function. Thank you for at least looking at it. And to answer question more clearly. This was a debugging assignment as I am working towards a complete understanding through school. As I said I wasn't looking for anyone to solve for me just to guide me so I can solve myself. Most people I have dealt with in the developer community has been super helpful so I simply wanted to reach out for help in my new endeavors. Thank you all for that help. Again I have fully solved all 10 errors which is what the // error# was about and believe will receive 100%. I know debugging probably seems beginner and mundane but we were all beginners once. Again the link to the solved project is below with a copy of the solved and unsolved project if anyone wants to play. This way I offer a benefit to the question having been asked.

https://www.dropbox.com/sh/vngg7j478h6zgcv/SVZF1bep6w

object array:

var flavors = [
{
    "flavor": "Vanilla",
    "favorite": "Yes!",
    "notes": "Great for sundaes."
},
{
    "flavor": "Chocolate",
    "favorite": "Yes!",//first error
    "notes": "All parts chocolate. What's not to love?"
},
{
    "flavor": "Neapolitan",
    "favorite": "No",
    "notes": "I dislike the strawberry chunks."
}
];

code to push the form data to the array:

var saveFlavor = function(){

var fav = getFavorite();   
//error 5 not fixed
var newFlavor = function() {
    flavors.flavor = document.getElementById('flavor').value,
    flavors.favorite = fav, //error 6 not fixed 
    flavors.notes = document.getElementById('notes').value //error 7
    };
    flavors.push(newFlavor);
    console.log(newFlavor)

    location.href="#home";
    document.getElementById('list').innerHTML = "";

};
var save = document.getElementById("submitFlavor"); //error 8
save.addEventListener("click", saveFlavor);

Data called on with:

var showFlavors = function(){
for(var i=0, len=flavors.length; i<len; i++){ //error 2
    var newLi = document.createElement('li');   
    document.getElementById('list').appendChild(newLi);
      var heading =document.createElement('h3');
          heading.innerHTML = flavors[i].flavor;
          newLi.appendChild(heading);
  var pNotes = document.createElement('p');
          pNotes.innerHTML= flavors[i].notes;
          newLi.appendChild(pNotes);
  var pFav = document.createElement('p');
        if(flavors[i].favorite == "Yes!") {
            flav = "Yes";
            } else if (flavors[i].favorite == "No") {
            flav = "No";
    };
    console.log(flav)
    pFav.innerHTML= flav; //error 3 
    newLi.appendChild(pFav);
    console.log(newLi); 
};


};

It does push to the Array but returns as Undefined I also dropboxed this code here if you need to see more. https://www.dropbox.com/sh/ee0usbthykoqllg/cZi_K6zst2

I fixed everything else in this debugging process however I am having trouble solving why I am returning undefined. I am not looking at someone giving me the answer, I am looking for guidance as to what I am doing wrong. It did not work at all when I started and I have fixed the rest just need help with this. Thanks.

Answer 1

newFlavor isn't an object, it's a function. This is how you create an object:

var newFlavor = {
    flavor: document.getElementById('flavor').value,
    favorite: fav, //error 6 not fixed 
    notes: document.getElementById('notes').value //error 7
};