Add to list

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>


    <style>
        .crossout {
            text-decoration: line-through;
        }

    </style>
</head>
<body>
    <input type="text">
    <button>Add item to list</button>
    <h2>To do list</h2>
    <ul id=list11>
        <li>Buy apple</li>
        <li>Feed the cat</li>
        <li>Call mom</li>
        <li>Do homework</li>
        <li>Listen music</li>
        <li>Trash the trash</li>

    </ul>

    <script>
        let lis = document.querySelectorAll("li");
        let list1 = document.querySelector("#list11");
        let btn = document.querySelector("button");
        let input = document.querySelector('input');

        /* Ricorda che in Safari le estensioni devono essere diverse! let list1 =NO #list1 ma #list11 ! */

        btn.addEventListener("click", addItem);

        function addItem() {
            console.log(input.value);
            let newLi = document.createElement('li');
            newLi.innerHTML=input.value;
            newLi.addEventListener('click',mark);
            list1.appendChild(newLi);
        }

        lis.forEach(function(i) {
            i.addEventListener("click", mark);
        })

        function mark() {
            this.classList.toggle("crossout");
        }

    </script>
</body>

</html>