hotsauce4dayz Posts - Answer Overflow

hotsauce4dayz

•Created by hotsauce4dayz on 7/28/2023 in #front-end

How do I get event listeners to work on elements rendered with JavaScript

I am trying to create a to-do list application where you can delete and edit tasks. I am working out the delete tasks function. It is not working however. I tried doing a simple task such as logging to the console when the button is clicked, but it won't even respond to that. This seems only to be happening to the

<li>

<li>

elements rendered with JavaScript. Here is my html code Discord is saying my message is too long. So here is the code pen since I can't post the html here https://codepen.io/KhumboMunsaka/pen/gOQQMMd Here is my JavaScript code

const form = document.getElementById('taskForm');
const taskInput = document.querySelector('.task-input');
const dueDateInput = document.querySelector('.due-date');
const taskBar = document.querySelector('.task-bar');
const editButton = document.querySelectorAll('.edit');
const editForm = document.getElementById('taskForm-edit');
const deleteTask = document.querySelectorAll('.delete');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent default form submission
  let taskDescription = taskInput.value;

  const task = ` 
      <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li>`;
  taskBar.insertAdjacentHTML('beforebegin', task);


});

deleteTask.forEach((task) => {
  task.addEventListener('click', (e) => {
    console.log('hi');
  });
});
});

const form = document.getElementById('taskForm');
const taskInput = document.querySelector('.task-input');
const dueDateInput = document.querySelector('.due-date');
const taskBar = document.querySelector('.task-bar');
const editButton = document.querySelectorAll('.edit');
const editForm = document.getElementById('taskForm-edit');
const deleteTask = document.querySelectorAll('.delete');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent default form submission
  let taskDescription = taskInput.value;

  const task = ` 
      <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li>`;
  taskBar.insertAdjacentHTML('beforebegin', task);


});

deleteTask.forEach((task) => {
  task.addEventListener('click', (e) => {
    console.log('hi');
  });
});
});

Feel free to give any feedback on the

9 replies

KPCKevin Powell - Community

•Created by hotsauce4dayz on 5/6/2023 in #front-end

How do I disable an input until a date is selected.

I am new to JS and I am working on a project. A booking project. I want to disable an input until a date is selected. Here is the JS:

const button = document.querySelector('.btn');
const date = document.querySelector('.date');

const currentDate = new Date();
date.addEventListener('input', function () {
  const pickedDate = new Date(this.value);
  if (pickedDate < currentDate || pickedDate == null) {
    button.classList.toggle('disabled');
  } else {
    button.classList.toggle('disabled');
  }
});

const button = document.querySelector('.btn');
const date = document.querySelector('.date');

const currentDate = new Date();
date.addEventListener('input', function () {
  const pickedDate = new Date(this.value);
  if (pickedDate < currentDate || pickedDate == null) {
    button.classList.toggle('disabled');
  } else {
    button.classList.toggle('disabled');
  }
});

Here is the html:

<input type="date" name="date" id="date" class="date">
<input type="submit" class="btn" value="Book Pitch" name="book_pitch">

<input type="date" name="date" id="date" class="date">
<input type="submit" class="btn" value="Book Pitch" name="book_pitch">

The disabled class:

.disabled {
  display: none;
}

.disabled {
  display: none;
}

12 replies

Gaming

Programming