我是javascript的新手，目前正在制作这样的待办事项列表。
我试图使列表项变成绿色时点击使用javascript。这是我当前的代码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=PT+Sans&family=Roboto:wght@300;400;500;700&family=Rubik:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/7fa743e7fb.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>WORK TO-DOS</h1>
<p id="desc">Enter text into the input field to add items to your list.</p>
<p id="compl-desc">Click the item to mark it as complete.</p>
<p id="rem-desc">Click the "X" to remove the item from your list.</p>
<section id="input-block">
<input type="text" name="todo" id="todo" placeholder="New Item">
<button id="submit"><i class="fa-solid fa-file-pen"></i></button>
</section>
<ul class="todo-area"></ul>
<script src="app.js"></script>
<!-- tst div -->
<!-- <div class='test-div'>
<span>lor</span>
<button id="delete-li">
<i class="fa-solid fa-xmark"></i>
</button>
</div> -->
</body>
</html>
CSS:
body {
height: 100vh;
background-color: #04a1bf;
display:flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
h1 {
font-size: 3.0rem;
color: white;
font-family: 'Rubik', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
/* changing colors */
#desc {
color: yellow;
}
#compl-desc {
color:greenyellow
}
#rem-desc {
color: #025f70;
}
section {
width: 70%;
height: 60px;
}
#todo {
height: 55%;
width: 90%;
border-radius: 5px;
border: none;
/* margin-right: 10px; */
}
#submit {
border: none;
height: 55%;
width: 7%;
font-size: 0.8rem;
border-radius: 0.5em;
background-color: #025f70;
color:aliceblue;
transition-property: all;
transition-duration: 0.5s;
/* transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
}
#submit:hover {
background-color: #02798f;
color: bisque;
cursor: pointer;
height: 55%;
/* border: 1px solid black; */
}
.todo-area {
list-style-type: none;
padding:0%;
width: 60%;
}
.todo-item {
/* width: 60%; */
background-color: #4eb9cd;
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
border-color: #025f70;
border-width: 3px;
border-style: solid;
transition: background-color 0.5s;
margin: 10px 0px;
}
.todo-item:hover {
background-color: #76cfe0;
}
.todo-item-complete {
background-color: #51df70;
color: #0f8d2a;
}
#delete-li {
border: none;
background-color: #4eb9cd;
margin-right:2%;
transition: background-color 0.5s;
}
.todo-item:hover #delete-li {
background-color: #76cfe0;
}
Javascript:
const todoUl = document.querySelector('.todo-area');
const input = document.querySelector('#todo');
const addBtn = document.querySelector('#submit');
console.log('input', input['value'])
function createLi(inputText) {
// this function creates the li with the delete button
// creating the Li first
const li = document.createElement('li');
// add class to li
li.classList.add('todo-item');
// making the button
const delBtn = document.createElement('button');
delBtn.setAttribute('id', 'delete-li');
// icon
const btnIcon = document.createElement('i');
btnIcon.classList.add('fa-solid');
btnIcon.classList.add('fa-xmark');
// adding that to the delete button
delBtn.appendChild(btnIcon)
// adding text to the element from the input
// creating a span
const liSpan = document.createElement('span');
liSpan.innerText = inputText;
li.appendChild(liSpan);
li.appendChild(delBtn);
return li
}
addBtn.addEventListener('click', () => {
// getting value in text box
let todoText = input.value;
console.log('button clicked');
console.log(todoText);
// adding to the ul element
if(todoText !== "") {
let newLi = createLi(todoText);
// adding class to the li
// newLi.classList.add('todo-item');
todoUl.appendChild(newLi);
}
// resetting the text box blank again
input.value = '';
})
// getting all the list items
const listItems = document.querySelectorAll('.todo-item');
// turning them green once they are clicked
for(let li of listItems) {
// adding an onclick event on them
li.addEventListener('click', () => {
// adding the active class
console.log('LI CMD');
li.classList.toggle('todo-item-complete');
})
}
这显然是行不通的。虽然我想我知道为什么它不起作用了。我需要知道如何设置事件处理程序上的元素是动态生成的一些动作在页面的结果。
您应该在创建li时添加eventListener像
function createLi(inputText) {
// this function creates the li with the delete button
// creating the Li first
const li = document.createElement('li');
// add class to li
li.classList.add('todo-item');
// making the button
const delBtn = document.createElement('button');
delBtn.setAttribute('id', 'delete-li');
// icon
const btnIcon = document.createElement('i');
btnIcon.classList.add('fa-solid');
btnIcon.classList.add('fa-xmark');
// adding that to the delete button
delBtn.appendChild(btnIcon)
// adding text to the element from the input
// creating a span
const liSpan = document.createElement('span');
liSpan.innerText = inputText;
li.appendChild(liSpan);
li.appendChild(delBtn);
li.addEventListener('click', () => {
// adding the active class
console.log('LI CMD');
li.classList.toggle('todo-item-complete');
})
return li
}