Используется 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);
}
};
});
