New Help with adding Fruit List

Javascript Programming
#1

I got it to work using my code but I don’t understand why it works. The only thing I did was add: “form id = “forFruit” " and “onsubmit =“getNewFruitAdded(); return false;”> "
I also tried to clear the list each time but the list.html(””) causes the input block to be removed. If I just use list.html() it does nothing. So two things
I was tying to figure out is why I need to do the return false to get the list to append and why the clear list does not work with my code?

why did “return false” cause the list to be appended ? Just wondering.

<!Doc Type html></Doc>
<html>
<head>
<title>Programming</title>
</head>
    <body>

        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        
        <script src = "https://code.jquery.com/jquery-latest.min.js"></script>
        
<h1>My Favorite Fruits</h1>

<ol id = "fruitList"/>
        

</head>

<body>

<form id= "forFruit" onsubmit = "getNewFruitAdded(); return false;">
<input id="fruitName" placeholder="Add More Fruit" type = "text"/>
<input type = "submit"/>
</form>
               
 <script>

     

     
var fruits = ["Apple", "Banana", "Grape","Pear"];
     
   

function redrawlist(){
    
var list = $("#fruitList");  
list.html("")
$.each(fruits,function (index,value){

$("<li/>").text(value).appendTo(list);
    
})};


     
function getNewFruitAdded() {

    newFruit = document.getElementById("fruitName").value;

    fruits.push(newFruit);

    console.log(fruits);
    redrawlist();

}
   
redrawlist();
1 Like
#2

Hey @Imhotep, hope you are great.

Now you had some issues in your syntax, there is a extra tags between your ol tag, also you should use a form when you need to get multiple inputs from the user, in this case is not need it because you just want 1 input from the user.

I have made some changes on your code, comments should help you understand what i did, please check it out and let me know if you still have questions on it.

solution 

<html>
<head>
<title>Programming</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src = "https://code.jquery.com/jquery-latest.min.js"></script>
</head>
  <body>
   <h1>My Favorite Fruits</h1>
   <ol id = "fruitList">
   </ol>
   <input id="fruitName" placeholder="Add More Fruit" type ="text"/>
   <button id="addFruitButton">Add fruit</button>
<script>
 var list = $("#fruitList");
 var fruits = ["Apple", "Banana", "Grape"];

 //reDraw list, show new elements added to the array
 function redrawList(){
  //clear list from errors
  list.html("");
  $.each(fruits,function(index,value){
    $("<li/>").text(value).appendTo(list);
  });
  console.log(fruits)
  }

  //this is the function for the button
  $("#addFruitButton").click(function(){
    //get value from the input
    var fruitText = $("#fruitName").val();
    //add that value to the array
    fruits.push(fruitText);
    //alert added value
    alert("Fruit Added: " + fruitText);
    //redraw the list to show new element
    redrawList();
  });
  //default show list
  redrawList()
</script>


</body>


</html>

I also moved your topic to his proper category (Javascript), so the team can reach you next time faster :slight_smile:

Carlos Z.

#3

Thanks Carlos

Can you tell me why "newFruit " = " " , the empty set. where newFruit = document.getElementById(“fruitName”).value did not get the input.

I get the new index but not the value/fruit .

#4

Hello Carlos, I got it to work using my code but I don’t understand why it works. The only thing I did was add: “form id = “forFruit” " and “onsubmit =“getNewFruitAdded(); return false;”> "
I also tried to clear the list each time but the list.html(””) causes the input block to be removed. If I just use list.html() it does nothing. So two things
I was tying to figure out is why I need to do the return false to get the list to append and why the clear list does not work with my code?

why did “return false” cause the list to be appended ? Just wondering.

<!Doc Type html></Doc>
<html>
<head>
<title>Programming</title>
</head>
    <body>

        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        
        <script src = "https://code.jquery.com/jquery-latest.min.js"></script>
        
<h1>My Favorite Fruits</h1>

<ol id = "fruitList"/>
        

</head>

<body>

<form id= "forFruit" onsubmit = "getNewFruitAdded(); return false;">
<input id="fruitName" placeholder="Add More Fruit" type = "text"/>
<input type = "submit"/>
</form>
               
 <script>

     

     
var fruits = ["Apple", "Banana", "Grape","Pear"];
     
   

function redrawlist(){
    
var list = $("#fruitList");  
list.html("")
$.each(fruits,function (index,value){

$("<li/>").text(value).appendTo(list);
    
})};


     
function getNewFruitAdded() {

    newFruit = document.getElementById("fruitName").value;

    fruits.push(newFruit);

    console.log(fruits);
    redrawlist();

}
   
redrawlist();