I am trying to get a typing effect for multiple lines. I want that my next for each iteration should run after the previous one has been executed. Is there a way to do that
HTML-
<body>
<div class="intro">
<p class="intro-text" style="display: none;">Hi</p>
<p class="intro-text" style="display: none;">This is Yash Verdhan Gupta</p>
<p class="intro-text" style="display: none;">And i am a ....</p>
</div>
</body>
JS
const introtext = document.querySelectorAll('.intro-text')
introtext.forEach((element) => {
var text = element.innerText;
var textlenght = text.length;
element.style.display = 'block';
var newtext = '';
var i = 0;
setInterval(writer, 200)
function writer() {
element.innerText = Newtext();
}
function Newtext() {
if (i < textlenght) {
newtext = newtext + text.charAt(i);
i++
}
return newtext
}
})```