한 글자씩 글자를 보여주는 걸 구현하고자 이 코드를 작성하였다.
const heroTyping = "Meditate to discover your higher self.";
const element = document.querySelector(".heading-primary");
console.log(element);
//The current index of the text being displayed
let index = 0;
const interval = setInterval(() => {
//update the heroTyping
element.textContent = heroTyping.slice(0, index);
index++;
//if all the text has been displayed, clear the interval
if (index > heroTyping.length) {
clearInterval(interval);
}
}, 100);처음에는 querySelector가 아니라 getElementsByClassName을 이용해 요소를 선택하려고 했는데 에러가 났다. 그 이유는 getElementsByClassName는 주어진 클래스명에 해당하는 모든 요소들을 찾아 반환하기 때문이다. 그래서 만약에 이걸 쓰고 싶다면 element[0].textContent으로 첫번째 요소를 선택해줘야 한다.
