3

Есть форма, в ней "инпуты", с ними "текстарея", у этих ребят класс .style-animation. Написала пару строчек, чтоб по событиям onfocus и onblur менялся цвет и размер. Как заставить этот код работать?

var stAnm = document.getElementsByClassName('style-animation');
stAnm.addEventListener('focus',onEvent('200px','#fff'));
stAnm.addEventListener('blur',onEvent('100%','rgba(240, 255, 240, 0.65)'));

function onEvent(height,color){
   this.style.height=height;
   this.style.backgroundColor=color;
}

Вроде бы все норм, но не работает. Знаю, что желаемое можно и на ccs задать, однако очень хочется на джс. З.Ы. может проблема кроется в this?

1 ответ 1

3

У вас две ошибки в коде:

1) stAnm.addEventListener не будет работать по скольку stAnm массив выбранных элементов с текущим классом, смотрите работу addEventListener

2) this не будет виден в функции callback, его нужно передать явно.

Вот уже рабочий код с исправлением этих ошибок:

<input type="text" name="anim1" value="anim1" class="style-animation" />
<input type="text" name="anim2" value="anim2" class="style-animation" />
<input type="text" name="anim3" value="anim3" class="style-animation" />
<script>
var stAnm = document.getElementsByClassName('style-animation');

for(var i=0;i<stAnm.length;i++){
    stAnm[i].addEventListener('focus',function(){onEvent(this,'200px','#fff')});
    stAnm[i].addEventListener('blur',function(){onEvent(this, '100%','rgba(240, 255, 240, 0.65)')});
}



function onEvent(elem,height,color){
   elem.style.height=height;
   elem.style.backgroundColor=color;
}
</script>

2
  • var _this = this; не лишнее ?) Commented 14 июл. 2017 в 13:50
  • @RostyslavKuzmovych Ну в принципе здесь можно задать и так function(){onEvent(this,'200px','#fff')} Commented 14 июл. 2017 в 13:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.