illiatovpeko
@illiatovpeko
Самолепный ВебдевелопЁр

Почему не срабатывает fadeIn()?

Используется JQuery 3.3.1

Ошибка:

Uncaught TypeError: Cannot read property 'display' of undefined
at ae (jquery.min.js:2)
at Object.ct (jquery.min.js:2)
at pt (jquery.min.js:2)
at HTMLDocument.a (jquery.min.js:2)
at Function.dequeue (jquery.min.js:2)
at HTMLDocument. (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.queue (jquery.min.js:2)
at w.fn.init.animate (jquery.min.js:2)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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>vertical-text</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    
    <input type="text" id="text" autofocus>
    <ul id="list"></ul>
    <script
        src="/dist/js/jquery.min.js"></script>
    <script src="/src/js/main.js"></script>
</body>
</html>


SCSS

body{
    display: flex;
}

ul{
    display: block;
    margin: 20px auto;
    width: 10%;
    list-style-type: none;
}

li{
    font-family: Arial;
    font-size: 48px;
    font-weight: 600;
    color: #507DAA;
    margin: 10px 0 10px 0;
    
}

#text{
    display: none;
}


JS

// adding content
$(document).ready(function(){


let text = document.getElementById('text');
let list = document.getElementById('list');

document.addEventListener('keydown', addLetter);

function addLetter(e){
  let key = e.key;
  
  if( /^[a-zа-яё]$/i.test(key) ){
    list.insertAdjacentHTML('beforeend', `<li>${key}</li>`);
    $(this).fadeIn(3000);
  }
};

});
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
ReaverJS
@ReaverJS
Правильно сказали - в this возвращается document. Т.е. надо выбирать созданный элемент как-то по другому, т.к. у insertAdjacentHTML нет callback функции, внутри которой this был бы равен элементу. И еще, чтобы показать элемент с FadeIn - он должен быть изначально скрытым.
Как вариант:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы