Javascript is only working with one class

Question

fairly new to Javascript. I have a text sliding up animation. The first div seems to work, but the second div doesn't. I have two divs but only one seems to work. Any suggestions/help on what seems to be wrong?

Here's my code below:

const txts = document.querySelector(".animate-text").children,
  txtsLen = txts.length;

let index = 0;

const textInTimer = 3000,
  textOutTimer = 2800;

function animateText() {
  for (let i = 0; i < txtsLen; i++) {
    txts[i].classList.remove("text-in", "text-out");
  }
  txts[index].classList.add("text-in");

  setTimeout(function () {
    txts[index].classList.add("text-out");
  }, textOutTimer);

  setTimeout(function () {
    if (index == txtsLen - 1) {
      index = 0;
    } else {
      index++;
    }
    animateText();
  }, textInTimer);
}

window.onload = animateText;

.home .tree p {
  margin: 0;
  overflow: hidden;
}
.home .tree p span {
  font-size: 2.8vw;
  color: grey;
  font-weight: 500;
  display: none;
}

.home .tree p span.text-in {
  display: block;
  animation: textIn 0.5s ease;
}
.home .tree p span.text-out {
  animation: textOut 0.5s ease;
}
@keyframes textIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes textOut {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

<div class="home">
  <div class="tree">
    <p class="animate-text">
      <span class="">first</span>
      <span class="">second</span>
      <span class="text-in">third</span>
      <span class="">forth</span>
      <span class="">fifth</span>
    </p>
  </div>
</div>

<div class="home">
  <div class="tree">
    <p class="animate-text">
      <span class="">first</span>
      <span class="">second</span>
      <span class="text-in">third</span>
      <span class="">forth</span>
      <span class="">fifth</span>
    </p>
  </div>
</div>

I tried the getElementByClassName selector but none of the suggestions seems to work that I've searched for here.

Remember: we don't know what "work" means to you (as per the classic "_code doesn't "not work", it always does exactly what you told it to do_" saying), so [explain what you expect to happen](/help/how-to-ask), based on when you do what, given the code that you're showing, and then talk about what _actually_ happens, and then finally talk about what you already did in terms of (re)researching/investigating/debugging. — Mike 'Pomax' Kamermans, Jul 21 '23 at 00:21
What I meant as regards to "work" is fact that the top text slides up perfectly fine. What I am trying to achieve is to have the second div do the same as the first one (slide up animation). I would wish to duplicate the divs so I have multiple slide up animations using the same Javascript. Hopefully that clears the end-result I'm after, Thank you. — Caramelpros, Jul 21 '23 at 00:31
I also tried using document.getElementsByClassName("html-code")[0] document.getElementsByClassName("html-code")[1] to reference two divs but they aren't working either. The first div is the only div which Javascript executes, strange. — Caramelpros, Jul 21 '23 at 00:34
It's not strange. You call `.querySelector()` to find the parent `
`, and that will only find the first such `
` on the page. — Pointy, Jul 21 '23 at 00:38
Which selector should I use so it calls all the
tags in the animate-text class? — Caramelpros, Jul 21 '23 at 00:41
Thanks for the help, Shuo. But that didn't seem to work. I tried replacing it, but that stops the entire animation altogether (both are still now). Thanks for your input. — Caramelpros, Jul 21 '23 at 00:49
`querySelectorAll` will return a nodelist, you can use `foreach` to add the animate to all `.animate-text`. — Shuo, Jul 21 '23 at 00:52
@Shuo - do you mean like this? const txts=document.querySelectorAll('.animate-text').children,txtsLen=txts.length;forEach(myFunction); — Caramelpros, Jul 21 '23 at 01:11
Please don't post code in comments. It's not readable. Edit your question and add the code there. The [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) contains examples. — jabaa, Jul 21 '23 at 01:29
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — jabaa, Jul 21 '23 at 01:30
@Jabaa - Thank you for your comment and as well as your suggestions. But I believe Brett has the solution in hand. Thank you regardless and have a wonderful day/night. — Caramelpros, Jul 21 '23 at 01:34

score 2 · Accepted Answer · edited Jul 21 '23 at 15:16

What’s wrong in your code is that document.querySelector(".animate-text") only returns the first element with the class animate-text. Instead, use querySelectorAll() to retrieve a list of all elements with this class.

const animateP = e => {

  const textInTimer = 3000, textOutTimer = 2800
  const txts = e.children
  const txtsLen = txts.length
  let index = 0

  const animateSpan = () => {
    for (let i = 0; i < txtsLen; i++)
      txts[i].classList.remove("text-in", "text-out")
    txts[index].classList.add("text-in")

    setTimeout(function () {
      txts[index].classList.add("text-out")
    }, textOutTimer)

    setTimeout(function () {
      if (index == txtsLen - 1)
        index = 0
      else
        index++
      animateSpan()
    }, textInTimer)
  }

  animateSpan()
}

document.querySelectorAll(".animate-text").forEach(e => {
  animateP(e)
})

.home .tree p {
  margin: 0;
  overflow: hidden;
}
.home .tree p span {
  font-size: 2.8vw;
  color: grey;
  font-weight: 500;
  display: none;
}

.home .tree p span.text-in {
  display: block;
  animation: textIn 0.5s ease;
}
.home .tree p span.text-out {
  animation: textOut 0.5s ease;
}
@keyframes textIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes textOut {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

<div class="home">
  <div class="tree">
    <p class="animate-text">
      <span class="">first</span>
      <span class="">second</span>
      <span class="">third</span>
      <span class="">fourth</span>
      <span class="">fifth</span>
    </p>
  </div>
</div>

<div class="home">
  <div class="tree">
    <p class="animate-text">
      <span class="">first</span>
      <span class="">second</span>
      <span class="">third</span>
      <span class="">fourth</span>
      <span class="">fifth</span>
    </p>
  </div>
</div>

BINGO! That nails the frame to the wall. Thanks a lot, Brett. I was trying to wrap my head around it for several days to no avail. I can't believe you solved it. Thank you, sir. — Caramelpros, Jul 21 '23 at 01:38

Javascript is only working with one class

1 Answers1