如何在 JavaScript 中给特定列表加下划线

Question

我在这里使用 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;

Answer 1

如果我没理解错的话，你想给被点击的复选框对应的标签添加一个划线。为此，将 updateCheck 函数更改为：

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';        
    }  

}

如何在 JavaScript 中给特定列表加下划线

How to underline specific list in JavaScript

javascript

checkboxlist

addeventlistener

dom-events