Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
    <h1>Shopping list</h1>
    <br>
   <input id="userInput" placeholder="enter item" type="text">
   <button id="button">enter</button>
   <br>

    <ul class="list">
    </ul>

</body>
<script src="script.js"></script>
</html>

var input = document.getElementById('userInput');
var button = document.getElementById('button');
var ul = document.querySelector('ul');
var li = document.getElementsByClassName("item");

// strikethrough task on click
function strike() {
    for(var i = 0; i < li.length; i++)
    {
        li[i].addEventListener('click',function() {
            if(this.classList.contains("iteJm")) {
                this.classList.toggle("done");
            }
        });
    }
}

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    li.classList.add('item');
    input.value = '';
    strike();
}

function addToListAfterClick() {
    if(inputLength() > 0) {
        createListElement();
    }
}

function addToListAfterEnter(event) {
    if(inputLength() > 0 && event.keyCode == 13) {
        createListElement();

     }
}

button.addEventListener('click',addToListAfterClick);
input.addEventListener('keypress', addToListAfterEnter);

.done {
    text-decoration: line-through;
}

li.addEventListener('click', strike);