Доброго!
Немного предысторииРешил сменить деятельность и жду начала курсов по веб-разработке. Пока жду, пытаюсь делать свой сайт. Просто так, ради развития.
Есть какая-то база знаний HTML и CSS, а вот с JS пока только разбираюсь, возникли сложности.
Подскажите, пожалуйста, как и почему именно так можно решить следующую задачу:
Есть заголовок на странице сайта. Хочу, чтобы этот заголовок появлялся не сразу, а каждый символ выводился один за других после перебора каждого символа набором случайных символов из массива.
Выглядеть будет примерно так, надпись
Что делаю для этого я:
// Создаю массив произвольных элементов, по которым будет идти перебор символа:
let phrases = [ "а",
"№",
"#",
"$",
"Я",
"р",
"О",
"_",
"+",
"=",
"@",
"!",
];
// Объявляю функцию выбора произвольного элемента массива:
function getRandomElement(arr) {
let randIndex = Math.floor(Math.random() * arr.length);
return arr[randIndex];
}
// В переменную заношу информацию о заголовке:
let header_title = document.querySelector('.header-title');
// Присваиваю переменной значение случайного элемента нужного массива:
let randomElement = getRandomElement(phrases);
// Осуществляю перебор каждого элемента в заголовке:
for(let i = 0; i < header_title.textContent.length; i++) {
// Перебор каждого элемента массива:
for(j = 0; j < phrases.length; j++) {
// С помощью библиотеки (Позволяет плавно менять элемент. Я ее подключил, конечно же)
// меняю значение каждого символа заголовка на произвольный символ массива
smoothly(header_title[i], 'textContent', randomElement);
}
}
Не работает. Почему, не могу разобраться.
Выдает такие ошибки в консоли:
smoothly.js:1 Uncaught TypeError: Cannot read property 'style' of undefined
at smoothly.js:1
at t.smoothly (smoothly.js:1)
at script.js:35
Буду благодарен за помощь в решении и прочие полезные советы. Спасибо!
