Applying the same function and accumulate it's effect

I’m having trouble applying the same function more than once. This function should populate my <ul></ul> element with <li></li>s.

I will illustrate with images:

  • Initial state: Only one turtle.

  • More than one apply - I get only one apply:
    List item

The code is available at the sandbox.

How could I solve this?

Sandbox:

The only place you are adding an li element is in your index.html file. What part of the JavaScript code are you expecting to add more? What part of the code do you think adds more li elements and why?

1 Like
  1. Your JS file is named card.js but you are referencing cards.js in the HTML.

  2. I do not see a call to the initGame function.

  3. populate should not return a function.

  4. When calling populateWith you do not want to return.

  5. Read the docs for appendChild it does not work like you think it does. Look at the link given to cloneNode.


Try fixing the code first before looking
var initGame = () => filterCards(howMany());

var howMany = () => prompt('With how many cards you wish to play with?');

var filterCards = (number) =>
  number % 2 === 0 && number > 4 && number < 14
    ? createCards(number)
    : initGame();

var querier = (e) => document.querySelector(e);
var ul = querier('ul');
let li = document.createElement('li');
var populateWith = (e) => (li) => e.appendChild(li.cloneNode(true));

var populate = (number) => {
  console.log(number);
  for (var i = 0; i < number; i++) {
    populateWith(ul)(li);
  }
};

var createCards = (number) => populate(number);

initGame();
1 Like

I thought appendChild, used in populateWidth’s definition, would append childs on after the another on the father element, if I iterated with it.

That can be done, but, as Iasjorg has done, I had to clone the the li element to make it a “fresh” element. So, when we call e.appendChild(clone) it’s never a repetition.

appendChild will delete the node and renew it, if we append an already appended note to where it was supposed to be. In other words, it didn’t had the behavior I thought it had, as Iasjorg had pointed out wisely, again!

Thank you both. And, I will practice some more with this functions. Because there are still a little obscure to me.

I have to make these cards flip and stay flipped if the match, in tuples, now. Wish me good luck!