2015-07-24 3 views
-1

Любая идея, почему эта функция не работает? У меня есть jsfiddle здесь http://jsfiddle.net/hoodleehoo/8wxwe9rd/переключается на div при вводе текстовой области

Вот функция у меня есть:

$("#answer").on('input',function(e){ 
      if(e.target.value === ''){ 
      // Textarea has no value 
      document.getElementById('hotpages1').style.display = 'block'; 
      document.getElementById('hotpages2').style.display = 'none'; 
      } else { 
      // Textarea has a value 
      document.getElementById('hotpages1').style.display = 'none'; 
      document.getElementById('hotpages2').style.display = 'block'; 
      } 
    }); 

Цель состоит в том, чтобы иметь изменение Div это стиль отображения в зависимости от того набираются текстовое поле в случае, если текст будет удален и. текстовая область снова пуста, она должна вернуться к тому, что было изначально.

UPDATE:

Хорошо, я забыл поставить JQuery в jsfiddle, которую я подобрала на право после того как я отправил это, но не решить проблему на моей странице. После тонны проб и ошибок выясняется, что функция должна быть размещена после формы, а не до или внутри. После перемещения функции в нижней части страницы она прекрасно работает!

+4

Добавить библиотеку JQuery поиграться! [см.] (http://jsfiddle.net/8wxwe9rd/4/) –

+0

«Нет библиотеки (pure js)» не имеет '$()' ... –

ответ

3

Вы забыли указать jQuery в скрипке.

Я сменил мероприятие на keyup, input также работает. input - это новое событие, обратитесь к compatibility table.

$("#answer").on('keyup', function (e) { 
    var hot1 = document.getElementById('hotpages1'), 
    hot2 = document.getElementById('hotpages2'); 
    if (e.target.value === '') { 
     hot1.style.display = 'block'; 
     hot2.style.display = 'none'; 
    } else { 
     hot1.style.display = 'none'; 
     hot2.style.display = 'block'; 
    } 
}); 

http://jsfiddle.net/8wxwe9rd/5/

Смежные вопросы