Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    To prevent the deletion of the inner tag’s content while manipulating the text inside the

    tag, you can check if the innerText belongs to the tag before modifying it. Here’s how you can do it:

    const repetitions = setInterval(x => {
// Check if the event target is an <a> tag or not
if (event.target.tagName.toLowerCase() === 'a') {
    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)];
        }
    }).join(""); // Join the array back into a string
}

    }, intervalTime);

    This modification ensures that only tags’ text content will be modified, and other tags like

    will be unaffected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search