Появление блока, если поле input не пусто

testbcard.dtraduga.vh55.hosterby.com
Разрешение 767 и ниже. В хедере появляется поиск с крестиком для очистки: http://joxi.ru/KAgGpvvT4pXdRA
Изначально я его отключаю (diaplay:none)
И хочу его включить, когда в поле input поиска начинаю что-то писать.

HTML:

<div class="mobile_search_header_menu">
                                    <input id="textInput" type="text" value="">   
                                    <button id="clearButton">х</button> 
                                </div>

Код:

var clearButton = document.getElementById("clearButton"),
    textInput = document.getElementById("textInput");

clearButton.onclick = function(e){
textInput.value = "";
}

if (textInput.value != ""){
   clearButton.style.display = "block";
}

Ошибок в консоли нет, но и ничего не срабатывает.

 

jQuery тоже еще учить и учить. Я кстати уже путать начал JS c jQuery))) Книгу читаю где 2 в одном)
Нашел один похожий вариант, но пока на практике еще не опробовал, - вот посмотрите http://jsfiddle.net/SVxbW/
На сколько я понимаю вместо input и button мне просто прописать свои id соответствующих блоков