Блог

Главная - Вопросы по программированию - Не могу заставить свой код перемещать элементы из одного неупорядоченного списка в другой с помощью «addEventListner».

Не могу заставить свой код перемещать элементы из одного неупорядоченного списка в другой с помощью «addEventListner».

#javascript #html #css #dom #addeventlistener

Вопрос:

Я составил список дел. Пользователь может записать список задач, которые он хочет выполнить в течение дня. Как только задачи будут выполнены, они могут установить флажок, который «запускает» линию-желоб. Затем задачи перемещаются из неупорядоченного списка с идентификатором «Список» в неупорядоченный список с идентификатором «Задача выполнена». Однако я хочу, чтобы пользователь мог переместить элемент, который находится в последнем, обратно в первый, просто дважды щелкнув по нему. Задачи должны быть представлены в их первоначальном «состоянии». А именно отсутствие сквозной строки и флажок без галочки. Я использовал объект события, и теперь я использую цикл for, чтобы сделать это. Однако обе попытки провалились. Я с нетерпением жду вашего звонка.

 var elUlList = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elCounter = document.getElementById("counter");
const taskCompleted = document.getElementById("taskCompleted");
var elements = document.getElementsByTagName("li");
var input = document.getElementsByTagName("input")

function createListItems() {
  var inputValue = elInput.value;
  if(inputValue === "" || inputValue === null) return

  var newLi = document.createElement("li");
  newLi.id = Date.now().toString();
  var input = document.createElement("input");
  input.type = "checkbox";
  input.name = "to-do-input";
  var newText = document.createTextNode(inputValue);
  newLi.appendChild(input);
  newLi.appendChild(newText);
  elUlList.appendChild(newLi);
  elCounter.innerHTML =  elements.length;

  var toDoInput = document.getElementsByTagName("to-do-input");

  for(var i = 0; i < toDoInput.length; i  ) {
    toDoInput[i].addEventListener("change", function(e) {
      if(e.target.checked == true) {
        e.target.parentNode.remove();
      }
    })
  }
  }

btn.addEventListener("click", createListItems, false);

elInput.addEventListener("keyup", function(e) {
  if(e.keyCode === 13) {
    e.preventDefault();
    btn.click()
  }
})

elInput.addEventListener("mouseover", emptyField, false)

function emptyField() {
  this.value = "";
}

elUlList.addEventListener("change", function(e){
  var target = e.target;
  var parent = target.parentNode;
  alert("are you sure you want to move this item to completed task");
  parent.classList.add("taskMoved");
  taskCompleted.appendChild(parent);
  elCounter.innerHTML =  elements.length;
});


elUlList.addEventListener("click", strikeOutElement, false);


function strikeOutElement(e) {
  var target = e.target;
  if(target.matches("input[type=checkbox]")){
  target.closest("li").classList.toggle("lineThrough", target.checked);
  }
}

var taskMoved = document.getElementsByClassName("taskMoved");

if(taskMoved.length > 0) {
  for(var i = 0; i < taskMoved.length; i  ) {
    taskMoved[i].addEventListener("dblclick", function() {
    taskMoved[i].classList.remove("lineThrough");
    taskMoved[i].firstElementChild.toggle("lineThrough", target.checked);
    taskMoved[i].firstElementChild.checked = false;
    elUlList.appendChild(taskMoved[i]);
  }, false);
  }
}
var date = new Date().toLocaleDateString("en-US")

footer.innerHTML = date
console.log(date) 
 .greenColor {
  color: green;
}

.redColor {
  color: red;
}

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

li {
  list-style-type: none;
} 
 <!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Practise App</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>

  <div id="message"class=""></div>
  <ul id="uList"></ul>
  <button id="btn" type="button" name="button">click here to add items</button><br>
  <input id="input" type="text" name="" value="">
  <div id="counter" class=""></div>
  <p>task Completed</p>
  <ul id="taskCompleted"></ul>

  <footer></footer>


    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

Ответ №1:

Вы много раз перебираете глобальные переменные и постоянно добавляете списки событий. Я попытался немного это исправить с помощью одной функции, которая создает задачу только с 2 слушателями, которые продолжают работать.

 const tasksTodo = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elCounter = document.getElementById("counter");
const tasksCompleted = document.getElementById("taskCompleted");
var elements = document.getElementsByTagName("li");
var input = document.getElementsByTagName("input");

function createTask(input) {
  let title = input.value;
  if ( !title ) return false;
  let task = document.createElement("li");
  let checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  task.appendChild(checkbox);
  task.appendChild(document.createTextNode(title));

  //Checkbox is source of truth, listen to it changing
  checkbox.addEventListener("change", e => {
      if (checkbox.checked)
        completeTask(task);
      else
        undoTask(task);
  });
  tasksTodo.appendChild(task);
  //Then let dblclick just toggle the box
  task.addEventListener("dblclick", e =>{checkbox.click()});
  //reset the input, we're done
  input.value = '';
}

function completeTask(task) {
  task.classList.add("lineThrough");
  tasksCompleted.appendChild(task);
}

function undoTask(task) {
  task.classList.remove("lineThrough");
  tasksTodo.appendChild(task);
}

btn.addEventListener("click", e=>{createTask(elInput)}, false);
elInput.addEventListener("keyup", function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    btn.click();
  }
});

var date = new Date().toLocaleDateString("en-US");

footer.innerHTML = date
console.log(date) 
 .greenColor {
  color: green;
}

.redColor {
  color: red;
}

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

li {
  list-style-type: none;
} 
 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Practise App</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <div id="message" class=""></div>
  <ul id="uList"></ul>
  <button id="btn" type="button" name="button">click here to add items</button><br>
  <input id="input" type="text" name="" value="">
  <div id="counter" class=""></div>
  <p>task Completed</p>
  <ul id="taskCompleted"></ul>

  <footer></footer>


  <script src="index.js" type="text/javascript"></script>
</body>

</html>
Метки: