[英]How to underline specific list in JavaScript
我在這里的是我正在使用 Javascript 動態地向我的 html 文件添加新列表。每當我單擊復選框時,我都想將直通到特定列表,但是我用於我的代碼的邏輯不起作用。 單擊復選框時它不起作用。 這是我的 html 格式:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Project 1</title>
<script src = "main.js" async></script>
<link href = "main.css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
</head>
<body>
<h1 class = 'checklist'>Checklist</h1>
<div class = "container">
<div class = "list">
<ul>
<!-- <li><h1>To Do List:</h1></li>-->
</ul>
<form method = "" action = "">
<input type = "text" id = "to-doList">
</form>
<button type = "submit" id = "addBtn">Add</button>
</div>
</div>
</body>
</html>
這是我的 Javascript 文件。 我知道我的代碼現在非常混亂,但有人可以幫助我如何做。 單擊旁邊的復選框時如何在特定列表中放置一個直通線。
//Gets the element by id
let newList = document.getElementById('to-doList');
let addList = document.getElementById('addBtn');
//Gets the element by using element name
let ulist = document.querySelector('ul');
//Holds the value from the input
let textValue = document.createTextNode("");
let checkboxOut = document.createElement('input');
checkboxOut.type = 'checkbox';
let mainList = document.querySelectorAll('li');
let storeNum = [0];
//Stores new value when input changes
newList.addEventListener('change', updateList);
//Function for the on-click button
function addNewList(e) {
//Creates html element
let head1 = document.createElement('h1');
let list = document.createElement('li');
let checkbox = document.createElement('input');
let newDiv = document.createElement('div');
let newBtn = document.createElement('button');
let deleteNode = document.createTextNode('Delete');
let num = mainList.length;
//Makes the input as a checkbox
checkbox.type = 'checkbox';
//Makes an id for the checkbox and button
checkbox.id = num;
newBtn.id = 'dynamicBtn'
//Takes the value of the textValue
let h1Node = document.createTextNode(textValue.nodeValue);
//Makes the head1 as its child element
list.appendChild(checkbox);
list.appendChild(head1);
list.appendChild(newBtn);
newBtn.appendChild(deleteNode);
ulist.appendChild(list);
head1.appendChild(h1Node);
let checkBoxValue = document.getElementById(num);
console.log(checkBoxValue);
checkboxOut = checkBoxValue;
checkBoxValue.addEventListener('change', updateCheck);
let theList = document.querySelectorAll('li');
mainList = theList;
console.log(theList.length);
storeNum += theList.length;
}
//Function for newList.addEventListener
function updateList(e){
//Passes the value from the input to the variable
textValue.textContent = e.target.value;
}
function updateCheck(e){
let updateCheckBox = document.createElement('input');
updateCheckBox.type = 'checkbox';
updateCheckBox = checkboxOut;
if(updateCheckBox.checked == true && updateCheckBox.id == 0){
e.target.nextElementSibling.style.textDecoration = 'line-through';
console.log(updateCheckBox.id);
}
if(!updateCheckBox.checked){
e.target.nextElementSibling.style.textDecoration = 'none';
}
}
//When the button is clicked, this executes the addNewList function
addList.onclick = addNewList;
如果我沒理解錯的話,你想在 label 中添加一個 line-through 對應於被點擊的復選框。 為此,將 updateCheck function 更改為:
function updateCheck(e){
if(e.target.checked == true){
e.target.nextElementSibling.style.textDecoration = 'line-through';
console.log(updateCheckBox.id);
}
if(!e.target.checked){
e.target.nextElementSibling.style.textDecoration = 'none';
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.