Bug on TODO-List

JavaScript
1

Hello everyone, i have a bug i writing a to-do list and i got my self into a bug, when i click unto the addTODO button, i created my checklist, on the fly with TextNode, and works perfecly!, but at the same time i have a validation that if the input field its empty, and the user clicks on the addTODO button it has to display a paragraph message telling the user to “please add a to-do list”. but when the user enters clicks again on the button keeps duplicating… like the checklist i made, not sure what I’m doing wrong, please any ideas on what I’m missing ? Thank you.
i have provided the codepen link.

https://codepen.io/ivanmt07/pen/EePWNM

2

Yes, because you need to clear the div first.

divLocation.appendChild(para);

put:

while (divLocation.hasChildNodes()) {
  divLocation.removeChild(divLocation.lastChild);
}

This will clear out divLocation.

Of course you will also need to do this when a good input is received so you would want to put it in a function, passing the pointer to the element to it. That element pointer should also be cached. And I would come up with a better id for the div than “div1”.

3

Hello Kevin, can you please be more specific on were to have the code line added not able to work the issue around ? maybe you write the code and the additional were to have it… here at forum because not getting the result… thanks…

4

OK, first I moved the selector to the of the code:

var divLocation = document.getElementById("div1");

DOM accessing is costly so you should only do it once if you can. This is called “caching”.

Then I created a function:

//clear div1
function clearDiv1() {
  while (divLocation.hasChildNodes()) {
    divLocation.removeChild(divLocation.lastChild);
  }
}

Since we have to do this in two places it makes sense to wrap it in a function.

Then I accessed that function, once when …

Actually now that I think about it, it doesn’t make sense to put it in the if and the else. It’s going to be called no matter what so we should put it outside the if/else. So I put the function call before the logic.

Here is the pen.

Please understand the changes. If something isn’t clear, please don’t be afraid to ask.

5

Hi Kevin,

Thank you for the help and you were very specific and very helpful… thank you so much, yes in fact it help me understand what i have wrong, i thought it will be better to do it in s single function but, like you said lets not access the DOM many times because of the cached… thank you so much, and yes in fact i will try to do it without any if else statement because of the new function.

Thank you so much you actually cleared my questions… thank you… very helpful KEvin thanks…
How long you been doing JS and what are the best techniques to get more familiar to it ? for best practices.

6

I used to be a C coder years ago but have been doing JS for about 18 months now.

How do you learn to code? I always say that in order to learn to write good code, you first have to write a lot of bad code. Just write. Make mistakes and learn from them. Build things. Be curious. Google things. Ask questions. Eventually you’ll be able to answer some of the easy questions. Build things. Go to meetups. Build things. Really, just code. You’ll get there.

7

Hello Kevin, thank you for the feedback i much appreciate it and i will take into consideration and work hard to get more knowledge of the language i appreciate your help and looking forward to for any other thoughts that i made have on the forum. Thank you for your help.