Hi Guys!
I ran across a weird behavior and wonder if anyone can tell me what’s up with this code for generating a dynamic list. In addition to following the lesson’s video example I wrapped the text input and button with opening and closing form tags. It took a while to figure out the culprit (the form tags) for the strange behavior.
What happened was that the user could enter the name of a fruit, click the button, and the console showed the appendTo() method worked to add the new fruit name to the array. New fruit names were added to the array with each click and if you look at the html page as you’re clicking the added name briefly appears then the original 3 fruits are left on the page.
The first console.log(fruits) shows the correct number of array items and the second console.log(fruits) shows 3 items in array.
Removing the form tags from the following code works as expected.
<html>
<head>
<title>This example of using form to add item to array comes from IvanOnTech JS course.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>My Favorite Fruit List</h1>
<ol id="fruitList">
</ol>
<form>
<input type="text" placeholder="Enter your fav fruit here." id="myFruit" />
<button id="addFruit">Add Fruit!</button>
</form>
<script>
// create variable to hold array of fruits
var fruits = ["Apple", "Pear", "Cherry"];
function getFruity() {
// create variable that targets ordered list
var list = $("#fruitList");
//empty current ol on page
list.html("");
// do something with each member of the array
$.each(fruits, function(index, value) {
// create list item - add fruit name to text - and append to the ol
$("<li/>").text(value).appendTo(list);
});
}
//have to call function to put list onscreen initially
getFruity();
// on click to enter fruit and return new fruit value
$("#addFruit").click(function() {
var newFruit = $("#myFruit").val();
//console.log(newFruit);
// add the new fruit to the end of fruit array
fruits.push(newFruit);
// call function here to re-build list with new fruit
getFruity();
console.log(fruits);
});
console.log(fruits);
</script>
</body>
</html>
Any comments?
