0

I've a bunch os <li> and inside it I've a button that closes the li when clicked.

.forEach does not work in index.js, but only in the Chrome console. I can conclude that the code is error free, so what the heck?

The HTML

<li draggable="true" class="draggable">
    <input type="checkbox" name="" class="completed-input">
    <input type="text" class="new-task-input" placeholder="your todo...">
    <ion-icon name="close-outline"></ion-icon>
</li>

The JS

const btnsDelete = document.getElementsByName('close-outline')
btnsDeleteArray.forEach(btn => {
    btn.addEventListener('click', e => {
        containerAllTasks.removeChild(e.target.parentNode)
        removeKeyByValue(e.target.parentNode.children[1].value)
        countAllItems()
    })
})

I tried to convert it to a usual Array instead a NodeList

const btnsDelete = document.getElementsByName('close-outline')
const btnsDeleteArray = Array.from(btnsDelete)

btnsDeleteArray.forEach(btn => {
    btn.addEventListener('click', e => {
        containerAllTasks.removeChild(e.target.parentNode)
        removeKeyByValue(e.target.parentNode.children[1].value)
        countAllItems()
    })
})

I just want to run the code inside this forEach every time a certain button is clicked

Ivar
  • 6,138
  • 12
  • 49
  • 61
Gustavo361
  • 1
  • 2
  • 1
    Are the `close-outline` elements part of the DOM when the script runs? Where on the page do you include this script? – Ivar Feb 07 '23 at 12:55
  • as @Ivar mentioned try adding your entire code inside of this block: `document.addEventListener('DOMContentLoaded', function () { // your code ... }, false);` this would wait for the html content to be ready before executing your JS – jollyjoyce1995 Feb 07 '23 at 12:58
  • 1
    when you run some js code on console any element of your page are already loaded in the DOM. That's not the same case when you put js code in a page. Look at `defer` property. Or https://en.wikipedia.org/wiki/Top-down_and_bottom-up_design – Mister Jojo Feb 07 '23 at 13:21
  • @Ivar They are. And I've tried both ways of including the script - putting it at the top of the page with the defer and at the end of the page, it didn't work either. – Gustavo361 Feb 07 '23 at 15:19
  • @jollyjoyce1995 I use defer and then I tried to put it at the bottom... no difference. I've a ton of other functions, woudn't it bug everything? – Gustavo361 Feb 07 '23 at 15:21
  • Without a [mcve] we can't tell why your script doesn't work. You can add `console.log(btnsDeleteArray.length)` to double check if if these elements can be found. (If the length is `0`, then these elements are not part of the DOM.) – Ivar Feb 07 '23 at 15:22
  • @Ivar I have it hosted: https://gustavo361.github.io/todo-app/ I haven't finished yet so there's a lot of dead code there. This function starts at the 158° line. if you wanna use it, use the mobile version, please. the js file itself - https://github.com/Gustavo361/todo-app/blob/main/js/index.js – Gustavo361 Feb 07 '23 at 15:25
  • @Gustavo361 On that page, the elements [are in fact not part of the DOM](https://i.stack.imgur.com/LbmxC.png). 5 of the `name="close-outline"` that appear on that page are commented out. The other one is part of a ` – Ivar Feb 07 '23 at 15:33
  • @Ivar OH.. but it shouldn't be a problem because they will be created and then the function should be activated and then look for the elements... weird I need create the li from the template, but if I do that, I won't work. Do you know some solution? – Gustavo361 Feb 07 '23 at 15:45
  • Maybe it _should_ but it doesn't now. Currently the code runs when the `index.js` is loaded and that's it. If you want it to run after the elements are created, then you should run the code when that happens. Or you could look into [event delegation](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript). – Ivar Feb 07 '23 at 15:51
  • @Ivar I tried to make the forEach directly when calling the element in the js, not working. But thank you man, I appreciate your help a lot – Gustavo361 Feb 07 '23 at 15:54

0 Answers0