I'm completely stuck on how this doesn't work. I feel like it definitely should (yes, I know since it doesn't it doesn't). I have two files, main.js and index.html.

The clear all function does not work properly, along with the save flavor function, and if you save one then it does not push it properly to the JSON object. Please a push in the right direction would be much appreciated!

Index.html
Code:
<!doctype html>  
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta name="description" content="PMA Debugging Practice" />
	
	<title>Debugging Assignment</title>

	
	
	<meta http-equiv="cleartype" content="on">
	
	<!-- StyleSheets under here -->
	
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	
	
	<script src="libs/modernizr.custom.min.js"></script>

</head>
<body>
	
	<!-- Home Page -->
		<div data-role="page" id="home">
			<div data-role="header" data-position="fixed">
				<h1>Ice Cream Flavors</h1>
			</div>
			<div data-role="content">
				
					<a href="#" id="display" data-role="button" data-transition="fade">Show Flavors
                      </a>
              
                <ul id="list" data-role="listview">
				</ul>
                
				
					
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="controlgroup" data-type="horizontal" id="footNav">
					
					<a href="#addFlavor" data-transition="slide" data-role="button" data-inline="true">Add a Flavor</a>				
					<a href="#" id="clear" data-inline="true">Clear all?</a>
				</div>
			</div>
		</div>
		
		<div data-role="page" id="addFlavor" data-add-back-btn="true">
			<div data-role="header" data-position="fixed">
				<h1>Add Flavor</h1>
			</div>
			<div data-role="content">
				
	<!-- Form to add Flavor -->
				
				<form action="#" id="flavorForm">
					<ul id="errors"></ul>
					
					<div data-role="fieldcontain">
                      <label for="drug">Flavor: </label>
						<input type="text" name="flavor" id="flavor" class="required" />
					</div>	
					<div data-role="fieldcontain">
						<label for="favorite">Favorite?</label>
						<input type="checkbox" id="favorite" value="Yes" class="checkbox" />
						
					</div>
					<div data-role="fieldcontain">
						<label for="notes">Notes: </label>
						<textarea name="notes" id="notes"></textarea>
					</div>	
						<input type="submit" value="Save Flavor" id="submitFlavor" data-theme="b" />

				</form>	

				
			</div>
			<div data-role="footer" data-position="fixed">
				<a href="#home" id="display" data-transition="slide" data-role="button" data-inline="true">Home</a>			
			</div>
		</div>
		

	<!-- Scripts -->
			<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
			<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
			<script type="text/javascript" src="main.js"></script>
	</body>
</html>
main.js file
Code:
window.addEventListener("DOMContentLoaded", function () {

    //Predefined flavors

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


    

    var showFlavors = function () {
        console.log("I'm running!");
        for (var i = 0, len = flavors.length; i < len; i++) { 
            var newLi = document.createElement('li');

            document.getElementById('list').appendChild(newLi);
            console.log(flavors[i]);
            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');
            pFav.innerHTML = "Is this a favorite? " + flavors[i].favorite; 
            newLi.appendChild(pFav);

        }
    };

    var display = document.querySelector("#display");
    display.addEventListener("click", showFlavors);

    

    var getFavorite = function () {
        var favCheck = document.querySelector("#favorite"); 
        console.log(favCheck);
        var status;
        if (favCheck.checked) {
            status = "Yes!";
        } else {
            status = "No";
        }
        return status;
    };

    //Save Function

    var saveFlavor = function () {

        var fav = getFavorite();

        var newFlavor = {};
        console.log(newFlavor);
        newFlavor.flavor = document.getElementById('#flavor').value; 
        newFlavor.favorite = fav;
        newFlavor.notes = document.getElementById('#notes').value; 

        flavors.push(newflavor);
        location.href = "#home";
        document.getElementById('list').innerHTML = "";
    };

    var save = document.querySelector("#submitFlavor");
    save.addEventListener("click", saveFlavor); 


    //Clear Flavors

    var clear = document.querySelector("#clear");
    clear.addEventListener("click", clearFlavors);

    var clearFlavors = function () {
        console.log("I'm running!");
        flavors.length = 0;
        document.getElementById('#list').innerHTML = ""; 
        flavors.clear(flavors);
    };

});