jQuery is not working? Dynamic List Assignment

My code is not working and I can’t explaing why… it gives me no error please help me! :slight_smile:

Here it is the code:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>

    <h1>La mia lista</h1>
    <ol id="lista">
    </ol>

    <script type="text/javascript" >
    var frutta = ['mele', 'banane', 'kiwi'];
    var lista = $('lista');

    $.each(frutta,function(index,value){
      console.log(index, value);
      $("<li/>").text(value).appendTo(lista);
    })
    </script>


  </body>
</html>

Try adding # to signify the id on line 14.

var lista = $(’#lista’);

lol, it was that easy :sweat_smile: Thank you!

No worries.
Those are easy mistakes to make. Everybody is guilty of leaving something like a semi-colon out of their code at some point.

Spoiler Alert ! Spoiler Alert !
Had a slightly different solution to this assignment.
The following solution didn’t need to redraw the list.

var fruits = ["Apple","Orange","Banana","lemon"]; var list = $("#FruitList"); // generate list of fruits $.each(fruits,function(index,value){ $("
  • ").text(value).appendTo(list); }); // gets button click event $("#button1").click(function(){ //get the value in a text box fruits.push($("#AddFruit").val()); //append value to the list $("
  • ").text(fruits[fruits.length - 1]).appendTo(list); });
  • I cannot add new fruit to list, I’m lost.

    Dynamic List
    </head>
    <body>
    
      <h1>My favorite Fruits</h1>
      <ol id="fruitList">
    
      </ol>
      <input id = "theInput" type="text" />
      <button>Submit</button>
    </body>
    
      <script>
    
      var fruits = ["Apple", "Orange", "Banana", "Pineapple"];
    
      var list = $("#fruitList");
    
      $( "#button" ).click(function() {
    
       fruits.push.appendTo($("<li>"));
       $("#theInput").text.val().appendTo(list);
       $("#fruitlist").appendTo(fruits.lenght + 1)
     });
    
    
      //calling function in console
    
      $.each(fruits,function(index,value){
        //create a list item
        //do not need var listItem = before $
    
        $("<li>").text(value).appendTo(list);
      }
    
    );
    
    
    console.log(list,fruits);
    
      </script>
    </body>
    
    <!DOCTYPE html>
    <!-- saved from url=(0127)file:///Users/_Alz/Desktop/Matteo%20Backup%20Alessio's%20Laptop/Assignement%20(Dynamic%20Lists%20and%20User%20Input%20box).html -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    	<title>My First Working Page</title>
    	<script src="./My First Working Page_files/jquery.min.js"></script>
    
    </head>
    <body>
    
    <h1>This is the guestlist for tonight:</h1>
    
    <ul id="guestnames"><li id="myself">myself</li></ul>
    
    <input type="text" id="newguests">
    <button onclick="addItem()">Add Item</button>
    <button onclick="removeItem()">Remove Item</button>
    
    <script>
    
    var guestNames = [];
    
    var guests = $("#guestnames");
    
    $.each(guestNames, function(index,value) {
      $("<li/>").text(value).appendTo(guests)
    });
    
    function addItem(){
    	var ul = document.getElementById("guestnames");
        var newguests = document.getElementById("newguests");
        var li = document.createElement("li");
        li.setAttribute('id', newguests.value);
        li.appendChild(document.createTextNode(newguests.value));
        ul.appendChild(li);
    };
    
    function removeItem(){
    	var ul = document.getElementById("guestnames");
      var newguests = document.getElementById("newguests");
      var item = document.getElementById(newguests.value);
      ul.removeChild(item);
    };
    
    
    	
    </script>
    
    
    
    
    &gt;</body></html>
    
    1 Like

    Different solution but it seems to work

    1 Like