Stop auto type at last array

Question

I'm trying to stop erasing my "auto typed text" when the last array is reached. I've been searching so for on Google but I can't find any solution.

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["reconnaitre un talent ?", "détécter une opportunité ?"];
const typingDelay = 170;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if (cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if (charIndex > 0) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if (textArrayIndex >= textArray.length) textArrayIndex = 0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if (textArray.length) setTimeout(type, newTextDelay + 250);
});

<div class="container" id="container">
  <h1>Savez-vous <span class="typed-text" id="typed-text"></span><span class="cursor" id="cursor">&nbsp;</span></h1>
</div>

Answer 1

Currently your functions keep calling each other without any signal to stop somewhere. You already keep track of where your index currently is in the textArray with textArrayIndex. Use that to see if the end has been reached in the else statement of your type function.

if (textArrayIndex < textArray.length - 1) {
  setTimeout(erase, newTextDelay);
}

Here it checks if the current index is lower than the last index of the array. If it is, it will continue to call the erase function and increment textArrayIndex with 1 there. Otherwise when the index is not lower than the last index, meaning it's the last one, it will simply do nothing, thus breaking the loop.

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["reconnaitre un talent ?", "détécter une opportunité ?"];
const typingDelay = 170;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if (cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    
    // Erase if the end has not yet been reached.
    if (textArrayIndex < textArray.length - 1) {
      setTimeout(erase, newTextDelay);
    }
  }
}

function erase() {
  if (charIndex > 0) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if (textArray.length) setTimeout(type, newTextDelay + 250);
});

<div class="container" id="container">
  <h1>Savez-vous <span class="typed-text" id="typed-text"></span><span class="cursor" id="cursor">&nbsp;</span></h1>
</div>