Search code examples
javascripthtmlcssdebugging

CSS and JS: How to prevent "event.target.innerText" from deleting inside tag

For example, I have a tag like:

<p><a href="mailto:[email protected]">[email protected]</a></p>

When it runs through this:

const repetitions = setInterval(x => {
      originalText = event.target.innerText;
      splitText = event.target.dataset.value.split("");
      event.target.innerText = splitText.map((character, index) => {
        
      if (index < i) {
        return event.target.dataset.value[index];
      } else {
        return codeSymbols[Math.floor(Math.random() * 26)]
      }

It deletes the inner a tag and leaves it with. <p>[email protected]</p>

The event is based off of observing:

const hiddenElements = document.querySelectorAll("h1, h2, p, a");
hiddenElements.forEach(ele => {
  observer.observe(ele);
})

I believe the observing event detects a p, then it targets the p tagname in event.target.tagname, deleting the inner a tag.

How would I prevent this from happening?

Solution

  • The code deletes the inner tag since the outer tag is observed, which causes the animation effect to delete the tag inside of the observed tag.

    To fix this, we can just add a class, "exclude-animation," for example to the outer tag to prevent the observe event from targetting and starting the animation on the outer tag. This makes it so that the observe will only animate the inner tag, meaning that the inner tag won't be deleted.