Question 235286 in Html Question posted in
Some basic documentation can be found here.

Html – Having problem to change the style with addEventListener

I started this project a few days ago and I’m trying to make a to-do list but got a problem with the addEventListener:

So I added a list and things are going well, but when I want to mark the items as completed by the button that has generated with the innerHTML, It does not change the style and says:

Cannot set properties of null (setting ‘addEventListener’)

Although, I tried the onclick method, but didn’t help.
So what should I do about it?

let myList = [];

const inputFieldEl = document.getElementById("input-el");
const addBtn = document.getElementById("add-btn");
let changeBtn = document.getElementById("done-btn")
let toDoList = document.getElementById("todoList");

addBtn.addEventListener("click", function(){
    let inputValue = inputFieldEl.value;

    myList.push(inputValue);

    clearInputField();

    toDoList.innerHTML += `
    <li id="item">
        <button id="done-btn"></button>
        ${inputValue}
    </li>`;
});

changeBtn.onclick = () => {
    document.querySelector("#item").style.backgroundColor = "#F1C40F";
}


function clearInputField(){
    inputFieldEl.value = ""
};

That’s my code and you see, after clicking the changeBtn, It should change the background color of the <li> tag that has created.Prototype: It’s the prototype, I just added so maybe it could be helpful

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

    toDoList.addEventListener("dblclick", function(event) {
  if (event.target.classList.contains("done-btn")) {
    const listItem = event.target.parentElement;
    const doneBtn = document.querySelectorAll("done-btn");
    listItem.style.backgroundColor = "#F1C40F";
    listItem.style.color = "#8E44AD";
    doneBtn.forEach(() => {
      doneBtn.style.backgroundColor = "#8E44AD";
      doneBtn.style.border = "3px solid #F1C40F";
    })
  }
});

    Here is the sample code. So the problem is the function won't change the style of the button for the second time and other times


  2. 0

    You have duplicate ids, you’re generating multiple list items with the same id="item". IDs should be unique within a page. Instead of using IDs for identifying individual list items, you can use classes or other attributes.

    And you’re adding event listeners to dynamically created elements, you need to consider event delegation since the elements might not exist when you initially set up the listeners.

    Here’s the modified version of your code

    let myList = [];

const inputFieldEl = document.getElementById("input-el");
const addBtn = document.getElementById("add-btn");
const toDoList = document.getElementById("todoList");

addBtn.addEventListener("click", function(){
    let inputValue = inputFieldEl.value;

    myList.push(inputValue);

    clearInputField();

    const newItem = document.createElement("li");
    newItem.innerHTML = `
        <button class="done-btn"></button>
        ${inputValue}
    `;
    toDoList.appendChild(newItem);
});

toDoList.addEventListener("click", function(event) {
    if (event.target.classList.contains("done-btn")) {
        const listItem = event.target.parentElement;
        listItem.style.backgroundColor = "#F1C40F";
    }
});

function clearInputField(){
    inputFieldEl.value = "";
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search