jQuery is not working? Dynamic List Assignment

Blockchain Programming Course
#1

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>
#2

Try adding # to signify the id on line 14.

var lista = $(’#lista’);

#3

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

#4

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.

#5

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); });
    • #7

    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>
    #8 
    <!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
    #9

    Different solution but it seems to work

    1 Like