簡體   English   中英

如何在JavaScript中給特定列表下划線

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM