Why doesn't fadeIn() work?

I

Illia T2019-12-25 05:18:12

PHP

Illia T, 2019-12-25 05:18:12

Used by JQuery 3.3.1

Error:

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);
  }
};

});

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vitaly Yushkevich, 2019-02-22
@dimastik1986

Try something like this

recursive_work_with_array($array);
 
function recursive_work_with_array($a) {
  if(!is_array($a)) return;
  foreach ($a as $key => $value) {
    if(is_array($value)) {
        recursive_work_with_array($value);
    }
    else {
            // doing smh with key / value data of array
    }
  }
}

R

ReaverJS, 2019-12-25
@illiatovpeko

Correctly said - this returns document. Those. you need to select the created element somehow differently, because insertAdjacentHTML doesn't have a callback function where this is equal to the element. And yet, to show an element with FadeIn - it must be initially hidden.
As an option:
snippet