Как подчеркнуть список c в JavaScript - PullRequest
Новая
       81

Как подчеркнуть список c в JavaScript

0 голосов
/ 14 февраля 2020

Что у меня есть, я динамически добавляю новый список в мой файл html, используя Javascript. Я хочу поместить line-through в специфицированный список c всякий раз, когда я нажимаю флажок, но логика c, которую я использую для своего кода, не работает, хотя. Это не работает, когда я нажимаю флажок. Это мой 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 файл. Я знаю, что мои коды сейчас очень грязные, но может кто-нибудь помочь мне, как мне это сделать. Как поместить сквозную строку в указанный список c, когда установлен флажок рядом с ним. 

//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;

1 Ответ

2 голосов
/ 14 февраля 2020

Если я правильно понимаю, вы хотите добавить сквозную подпись к метке, соответствующей флажку, на который вы нажали. Для этого измените функцию 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';        
    }  

}
...