Почему-то перестало работать подчеркивание + счетчик

Question

Почему-то перестало работать подчеркивание + счетчик

Рейтинг: 0Ответов: 1Опубликовано: 19.05.2023

Html/Css/Js код :

let inputData = document.querySelector('#inputTask');
let btnAddTask = document.querySelector('#btn-add');
let ulList = document.querySelector('#list');
let spans = document.getElementsByTagName('span');
let data = document.querySelector('#data');
let btnInfo = document.querySelector('#btn-info');
let devInfo = document.querySelector('#dev-info');
let text = document.querySelectorAll('#list>li')

//<li>Task1 <span>Delete</span></li>

function createTask() {
  let inputValue = inputData.value;
  if (!inputValue) return;
  inputData.value = '';
  let dateAdded = new Date();

  let newLi = document.createElement('li');
  newLi.innerText = inputValue + ' ';
  //<li>Task1</li>

  let newSpan = document.createElement('span');
  newSpan.innerText = ' Delete';
  //<span>DELETE</span>

  let dateSpan = document.createElement('a');
  console.log(dateAdded.toDateString());
  dateSpan.innerText = dateAdded.toDateString();


  newLi.insertAdjacentElement('beforeend', dateSpan);


  newLi.insertAdjacentElement('beforeend', newSpan);
  //<li>Task1<span>DELETE</span></li>  

  ulList.insertAdjacentElement('beforeend', newLi);

  removeTask();
  changeActiveTask();
  updateCounters();
}

btnAddTask.onclick = createTask;


function removeTask() {
  for (let spanItem of spans) {
    spanItem.onclick = function() {
      spanItem.parentElement.remove();
      updateCounters();
    }
  }
}

removeTask();

btnInfo.onclick = function() {
  devInfo.style.display = 'block';
}

let tasks = document.getElementsByTagName('li');

function changeActiveTask() {
  for (let task of tasks) {
    task.addEventListener('click', function() {
      task.classList.contains('done');
      updateCounters();
    });
  }
}

changeActiveTask();


function updateCounters() {
  let activeCounter = document.getElementById('active-counter');
  let inactiveCounter = document.getElementById('inactive-counter');
  let activeCount = 0;
  let inactiveCount = 0;

  tasks.forEach(task => {
    if (task.classList.contains('done')) {
      inactiveCount++;
    } else {
      activeCount++;
    }
  });

  activeCounter.textContent = activeCount;
  inactiveCounter.textContent = inactiveCount;
}

ul {
  list-style-type: none;
}

span {
  color: red;
  cursor: pointer;
  /*  border: 1px solid red; */
}

#list li:first-child {
  margin-top: 30px;
}

#btn-info {
  margin: 20px 0 25px 435px;
  display: flex;
  justify-content: center;
}

#dev-info {
  height: 100px;
}

.dev-content {
  padding: 45px 25px;
}

.done {
  text-decoration: line-through;
}

#active-counter,
#inactive-counter {
  margin-left: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do app</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="./style/style.css">
</head>

<body>
  <h1 class="text-center">To-Do application</h1>
  <div class="container">
    <button class="btn btn-primary col-4" id="btn-info">Информация о себе</button>
    <div id="dev-info" class="modal">
      <div class="dev-content">
        <h4>Разработчик: Неймарк Даниил</h4>
      </div>
    </div>
    <div class="row g-3">
      <div class="col-8">
        <input type="text" class="form-control" id="inputTask" placeholder="Input task">
      </div>
      <button class="btn btn-primary col-4" id="btn-add">Add task</button>

    </div>

    <ul class="row g-3" id="list">
      <li>Task1 <data value=""></data><span>Delete</span></li>
      <li>Task2 <span>Delete</span></li>
      <li>Task3 <span>Delete</span></li>

    </ul>
    <span id="active-counter">0</span> активных задач
    <span id="inactive-counter">0</span> неактивных задач
  </div>

  <script src="./script/script.js"></script>
</body>

</html>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 2

У вас была проблема в том, что вы получаете tasks единоразово и не обновляете их.

Теперь при каждом обращении к tasks они запрашиваются по новой.

UPD:

Поправил момент с подчеркиванием.
Изменил метод добавления новых TODO'шек на страницу.
Убрал ненужные переменные

Прошу когда создаете переменные и не будете их менять, то используйте const, также рекомендую почитать про шаблонные строки

const inputTask = document.querySelector('#inputTask');
const ulList = document.querySelector('#list');
const devInfo = document.querySelector('#dev-info');

const btnInfo = document.querySelector('#btn-info');
const btnAddTask = document.querySelector('#btn-add');

const activeCounter = document.querySelector('#active-counter');
const inactiveCounter = document.querySelector('#inactive-counter');

//<li>Task1 <span>Delete</span></li>

const getTasks = () => document.querySelectorAll('li');

const createTask = () => {
  const value = inputTask.value;
  if (!value) return;

  inputTask.value = '';

  const addedDate = new Date();
  const html = `<li>${value} <a>${addedDate.toDateString()}</a><span> Delete</span></li>`;

  ulList.insertAdjacentHTML('beforeend', html);

  updateRemoveTaskEvent();
  changeActiveTask();
  updateCounters();
};

const updateRemoveTaskEvent = () => {
  const spans = document.querySelectorAll('span');
  spans.forEach((span) =>
    span.addEventListener('click', (e) => {
      span.parentElement.remove();
      updateCounters();
    }),
  );
};

updateRemoveTaskEvent();

const changeActiveTask = () => {
  getTasks().forEach((task) => {
    task.addEventListener('click', (e) => {
      task.classList.add('done');
      updateCounters();
    });
  });
};

changeActiveTask();

const updateCounters = () => {
  let activeCount = 0;
  let inactiveCount = 0;

  getTasks().forEach((task) => {
    task.classList.contains('done') ? inactiveCount++ : activeCount++;
  });

  activeCounter.textContent = activeCount;
  inactiveCounter.textContent = inactiveCount;
};

updateCounters();

btnAddTask.addEventListener('click', createTask);
btnInfo.addEventListener('click', () => devInfo.classList.toggle('show'));

ul {
  list-style-type: none;
}

span {
  color: red;
  cursor: pointer;
  /*  border: 1px solid red; */
}

#list li:first-child {
  margin-top: 30px;
}

#btn-info {
  margin: 20px 0 25px 435px;
  display: flex;
  justify-content: center;
}

#dev-info {
  height: 100px;
}

.dev-content {
  padding: 45px 25px;
}

.done {
  text-decoration: line-through;
}

#active-counter,
#inactive-counter {
  margin-left: 10px;
}

.show {
  display: block !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do app</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="./style/style.css">
</head>

<body>
  <h1 class="text-center">To-Do application</h1>
  <div class="container">
    <button class="btn btn-primary col-4" id="btn-info">Информация о себе</button>
    <div id="dev-info" class="modal">
      <div class="dev-content">
        <h4>Разработчик: Неймарк Даниил</h4>
      </div>
    </div>
    <div class="row g-3">
      <div class="col-8">
        <input type="text" class="form-control" id="inputTask" placeholder="Input task">
      </div>
      <button class="btn btn-primary col-4" id="btn-add">Add task</button>
    </div>

    <ul class="row g-3" id="list">
      <li>Task1 <data value=""></data><span>Delete</span></li>
      <li>Task2 <span>Delete</span></li>
      <li>Task3 <span>Delete</span></li>
    </ul>
    
    <span id="active-counter">0</span> активных задач
    <span id="inactive-counter">0</span> неактивных задач
  </div>

  <script src="./script/script.js"></script>
</body>

</html>

Почему-то перестало работать подчеркивание + счетчик

Ответы