如何在html列表中通过按下按钮来选择和遍历项目

JS - How to select and line-through the items in html list by pressing on a button?

本文关键字：按钮 选择 项目 遍历 html 列表      更新时间：2023-09-26

我刚开始学习JS，遇到了一个我不知道如何解决的特定任务。

假设我们有一个有列表的页面，并且有一个按钮，我可以用它来补充这个列表中的新案例。我遇到的问题是:我需要以某种方式实现一个函数，该函数将从所有现有和添加的元素列表中更改选定行的样式。

例如，如果我们的列表-"我们必须做的事情的列表"，我需要让用户可以按下"完成"按钮，并选择所需的行。选择完成后，选中的行将获得直通。

function addItemToTheList() {
  var newItem = document.createElement("li");
  var input = document.getElementById("Input");
  newItem.innerHTML = input.value;
  input.value = "";
  document.getElementById("todo").appendChild(newItem);
}
#todo {
  font-family: Arial;
}
#todo .done {
  color:gray;
  text-decoration:line-through;
}
<!doctype html>
<html>
  <head>
    <title> How can user change added and predefined elements in the list?</title>
  </head>
<pre>
<input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here">  <input 
type = "button" value = "Add" onclick = "addItemToTheList()">
</pre>
 <hr align = "left" width = "378">
  <body>
    <div id = "todoList">
	    <ol id = "todo">
        <li class = "done"> Watch all seasons of "Game of Thrones"</li>
        <li class = "done"> Write a book</li>
        <li class = "undone"> Learn "JS"</li>
      </ol> 
    </div>
  </body>
</html>

有人愿意给我指个正确的方向吗?

您必须首先在每个未完成任务上添加一个click事件。然后，当您创建任务时，只需添加另一个click事件。

然后你只需要点击一个未完成的任务来改变他的状态。

希望这是你想要的:

function addItemToTheList() {
  var newItem = document.createElement("li");
  var input = document.getElementById("Input");
  newItem.innerHTML = input.value;
  input.value = "";
  document.getElementById("todo").appendChild(newItem);
  
  // Add click listener
  newItem.addEventListener('click', done);
}
function done() {
  this.className = "done";
  this.removeEventListener('click',done);
}
// Initialize all listener for current undone tasks
function init() {
  var undoneItems = document.getElementsByClassName('undone');
  for(var i = 0; i < undoneItems.length; i++){
    undoneItems[i].addEventListener('click', done);  
  }
}
#todo {
  font-family: Arial;
}
#todo .done {
  color:gray;
  text-decoration:line-through;
}
#todo .undone {
  cursor: pointer;
}
<!doctype html>
<html>
  <head>
    <title> How can user change added and predefined elements in the list?</title>
  </head>
  <body onload="init()">
    <pre>
      <input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here">       <input 
type = "button" value = "Add" onclick = "addItemToTheList()">
    </pre>
    <hr align = "left" width = "378">
    <div id = "todoList">
	    <ol id = "todo">
        <li class = "done"> Watch all seasons of "Game of Thrones"</li>
        <li class = "done"> Write a book</li>
        <li class = "undone"> Learn "JS"</li>
      </ol> 
    </div>
  </body>
</html>

您需要创建另一个函数，为每个li项添加一个按钮，并为每个按钮添加一个on click函数，以将类更改为done。

这是一个jsfiddle链接，我已经开始所需的工作。它不是功能齐全，但你能从我身上学到什么呢?:)

https://jsfiddle.net/nu6b00o0/

    (function(){
var buttons = document.getElementsByTagName('button');
for(i = 0; i <= buttons.length -1; i++){
buttons[i].addEventListener('click', function() {
    doOrUndoItem();
}, false);
if(buttons[i].parentNode.className == 'done'){
buttons[i].className = 'btn-success';
} else {
buttons[i].className = 'btn-warning';
}
}
}());

请随时提问

汤姆

希望这对你有帮助。

//list your pre existing items
var items = document.querySelectorAll("li");
function createListElement(){
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
  //add the function in your new items
	li.addEventListener("click", alterStatus)
  //
	input.value = "";
}
// add/remove class
function alterStatus(){
	this.classList.toggle("done");
}
//set the function to the pre existing items
for (var i = 0; i < items.length; i++) {
	items[i].addEventListener("click", alterStatus);
}

相关文章：