Untitled

<html>

<script type="text/javascript" src = "scripts.js">
</script>

<body>
 <div id="add-task">
     <p>Text</p>
     <input />
     <button onclick="onButtonClick()">Button</button>
 </div>

 <br>
 <button onclick="Clear_all_tasks()">Clear all</button>
<br>
 <strong>All Tasks:</strong>
 <div id="tasks-list-empty" style="display:none">
     <br/>
     you have no tasks
 </div>
     <div id="task-list">
     <ul>
         <li>Hi!</li>
         <li>Hello!)</li>
     </ul>
     </div>


</body>

</html>

//---------------------------------------------------------------------------------------------------------------------------------
                                                     // scripts.js

var data = []; //massiv

 //peremalovka
    var redrow = function ()
    {
        var taskelem= getULList();
        taskelem.innerHTML = '';
        var li = [];
        for (k in data)
        {
            var task = data[k];
            taskelem.innerHTML += '<li>'+task+'</li>';
        }
        hideEmpty();

}

function getULList(){
    var taskslistelem = document
        .getElementById('task-list')
        .getElementsByTagName('ul')[0];
    return taskslistelem;
}

function onButtonClick(){
    var input = document
        .getElementById('add-task')
        .getElementsByTagName('input')[0];

    var value = input.value;
    data.push(value);
    redrow();

}

function Clear_all_tasks(){
    var taskslistelem = getULList();
    taskslistelem.innerHTML = ' ';
    showEmpty();
}

var showEmpty = function () {
    var taskListEmptyEl = document.getElementById('tasks-list-empty');
    taskListEmptyEl.style.display = '';
    data = [];
 }

var hideEmpty = function () {
    var taskListEmptyEl = document.getElementById('tasks-list-empty');
    taskListEmptyEl.style.display = 'none';
}