JS - Dynamic List & ASSIGNMENT

Javascript Programming
#1

Dear all,


I have a question regarding video “Javascript Next Level / Dynamic List & ASSIGNMENT”.
In Ivan’s video he adds the Variable “var list = $(’#fruitList’)”, that I don’t really understand what it’s purpose is.
Making a sketch, it goes something like this (see picture bellow):

Ivan Code

Can someone please explain how the var list = $(’#fruitList’) will look like after Step 1?
I believe it takes some shape in the background that it is not necessary to be displayed.

However, to me it makes more sense, and I can grasp my mind around the code, if we eliminate that variable, which will result in obtaining the same result. To do this we will have to append the newly created ‘lines’ to the Order list. Please see sketch bellow:
Andrei Code

Hope I have made by self understandable and thank you in advance for your help.

Kind regards,
Andrei

1 Like
#2

Hello sir, both are valid method, the difference for the var list = $(’#fruitList’) can be used to access the elements that are on the < ol id=“fruitlist”> and apply some actions on the ordered list (if you want).

Let say for example that you want to apply some style over the list, that is when the the var list = $(’#fruitList’) comes into play.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <title>fruit list</title>
  </head>
  <body>
        <h1>My favorite fruits</h1>

        <ol id="fruitlist">
          </ol>

        <script>

          var fruits = ["apple", "oranges","banana"];
          var list = $("#fruitlist").css("color", "yellow");
          $.each(fruits,function(index, value){
            $("<li/>").text(value).appendTo(list);
          });

        </script>
  </body>
</html>

That code will apply the color yellow to the elements on the list, thanks to the var list = $(’#fruitList’).

Hope this gives you a clear view of the subject, keep learning! :slight_smile:

If you have any doubt, please let us know so we can help you!

Carlos Z.

2 Likes
#3

Dear Carlos,

Thanks for clearing the situation. Everything is crystal clear :slight_smile:

Kind regards,
Andrei

2 Likes
#4

No Im having trouble with my code to run properly, ive tried the code and made the adjustment on LIST to FruitList. still I keep getting a error. Can you please advise. Thank you.

This Is Great Website

My favorite fruits

Add fruit
#5

Helloo,

Not sure if this is the correct forum, but I am on lesson 20 - Dynamic List - Objects, and I am a little stuck,
I have updated the code below circled in red, but when I go to update the website, it comes back with undefined, does anybody have any ideas?
image
image

#7

Hi @Andre_Mark,

Please paste the code in the post instead of a screenshot of the code.

And paste the screenshot of the undefined output,

This way we can properly, debug your code and give you the answer.

Happy learning!

#8

I think I might have cracked it, but thanks for reaching out to me!

1 Like
#9

Hey guys, I know this topic might be closed but I didn’t want to open a new one with the same topic.
So, for the assignment we have to code a text input that adds fruits to our list.
This is how I cracked it:

<h1>My favorite fruits</h1>
  <ol id="fruitList">
  </ol>
  <input type="text" id="listText" placeholder="Add fruits to the list"/>
  <button id="listButton">Add me</button>

var fruits = ["Apple", "Pineapple", "Orange", "Banana"];
    var list = $("#fruitList");

$("#listButton").click(function(){
      var userText = $("#listText").val();
      $(list).append(`<li>${userText}</li>`);
    });

But Ivan shows a different approach, instead of using .append() expression to append the input text to our list, he suggests to call a redrawList function therefore using the expression list.html("");

Can someone please clarify what is the main difference (if) and which one would be more convenient? Thanks in advance!

1 Like
#10

HI @juanmcba,

Both approaches are absolutely fine. The only difference that you might encounter is if you had a reset button or a item delete button, in that case you will have to use a redraw function. So, if you HAVE to use the redraw function in those buttons, why not use it here (when adding fruits) too.

It’s just a matter of convenience. Both approaches are fine.

Hope this helps.

Happy Learning. :smile:

1 Like
#13

Here is a way to do assignment without redrawing list…

Screen Shot 2021-06-26 at 1.21.15 PM

1 Like
#14

Carlos,
To do assignments without redrawing list is to do the work at the forum instead of copy/paste from another browser? Not sure what is the way to do assignment without redrawing list.
Lorraine

#15

If you did not redraw the list, how can we be sure that your new element is being appended to the list? :nerd_face:

Carlos Z

#16

I did redraw the list from scratch in an outside browser/editor. Once finished, I copied and pasted it here. When it ran it answered to the right side open page and not in this box. I did not know that we could do original work in this box? Not sure of the icons above. None say “run.” What I am thinking is that I may not have saved the redraw. I thought Google did when I closed the work. Because I do not know what the final product is supposed to look like or do, I cannot tell if the outcome is as expected.
What I cut and pasted disappeared but the answer on the right side was to add another fruit. I did that. It would help if I could know what the final outcome looks like and does. Should I do it over again and see if I get a new result?

#17

I’m not sure if I should be proud of myself or what, but I have made this exercise just by scrolling to a lot of google searches and have tried several times until I get the right answers. It took me hours to actually solve it but I am happy, my solution is different from Ivan, but similar. I haven’t used the redraw syntax though.

please see it if my coding is okay.

This is a fruit list

My favorite fruits

Add Fruit 
  <script>

    var fruits = ["Apple", "Orange", "Banana", "Pineapple"];
    var list = $("#fruitList");
    $.each(fruits,function(index,value){
      $("<li/>").text(value).appendTo(list);
    });

    $("#myButton").click(function(){
      var term = $('#txtVal').val();
      fruits.push(term);
      $("<li/>").text(term).appendTo(list);
      console.log(fruits);
    });

  </script>
</body>
1 Like