Implementation of simple todolist addition, deletion and modification with native JS

Time:2020-10-26

Just finished, there are still a lot of improvements to be made. When you have time to optimize, you are ready to refactor with Vue and react. The following is the source code. Copy can be run directly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li{
            margin: 10px 0;
        }
        .item{
            padding:0px 20px;
        }

    </style>
</head>
<body>
    <div id="app">
        <input type="text" class="input" id="item_ Add "holder = enter the item to be added" > "
        <ul></ul>
    </div>
    <script>
        var item_add = document.querySelector('#item_add')
        var ul = document.querySelector('ul')
        var del = document.querySelector('.item_d')
        var edit = document.querySelector('.item_edit')
        var edit_commit
        item_add.addEventListener('keyup',function(event){
            var event = window.event || event;
            var code = event.keyCode || event.which || event.charCode;
            if(code === 13&&item_add.value!=''){
                console.log(item_add.value)
                var li = document.createElement('li')
                
                var span = document.createElement('span')
                span.innerHTML = item_add.value
                span.setAttribute('class','item')
                item_add.value = '';
                var item_d = document.createElement('button')
                item_d.innerHTML = 'x'
                item_d.setAttribute('class','item_d')
                
                var item_edit = document.createElement('button')
                item_edit.innerHTML = 'edit'
                item_edit.setAttribute('class','item_edit')
                li.appendChild(span)
                li.appendChild(item_d)
                li.appendChild(item_edit)
                ul.appendChild(li)
                

            }
            // e.stopPropagation();
            // e.preventDefault(); 
        })

        ul.addEventListener('click',function(e){
            var e = e|| window.event
            console.log('button-transparent')
            if(e. target.getAttribute ('class') === 'item_ D '& & confirm ('are you sure you want to delete it? ')){
                ul.removeChild(e.target.parentNode)
                console.log ('deleted ')
            };
            if(e.target.getAttribute('class')==='item_edit'){
                
                var value = e.target.parentNode.firstChild.innerText
                
                e.target.parentNode.removeChild(e.target.parentNode.firstChild)
                var item_input = document.createElement('input')
                
                item_input.value = value
                
                var edit_commit = document.createElement('button')
                e.target.parentNode.insertBefore(item_input,e.target.parentNode.firstChild)
                e.target.setAttribute('class','edit_commit')
                return ;
             
            }
            if(e.target.getAttribute('class')==='edit_commit'){
                var value = e.target.parentNode.children[0].value;
               
                    var value = e.target.parentNode.children[0].value;
                    
                    // e.target.parentNode.removeChild(e.target.parentNode.firstChild)
                    var span = document.createElement('span')
                    span.innerText = value
                    var remove_dom = e.target.parentNode.firstChild
                    e.target.parentNode.removeChild(e.target.parentNode.firstChild)
                    e.target.parentNode.insertBefore(span,e.target.parentNode.firstChild)
                    
                    e.target.setAttribute('class','item_edit')
                    e.stopPropagation();
                    e.preventDefault(); 
                return    
                
            }   
        })    
//How to solve the problem that the input box cannot be rendered in the second modification and the value becomes undefined
//Perfect solution: when you change the class of the Modify button, you need to return, otherwise it will cause an endless loop
    </script>
</body>
</html>

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]