Question 35635 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Converting simple text fade loop from jQuery to Javascript

I have three divs with text inside them which I want to fade in and out on a loop. I had it working in jQuery but decided its best to be in pure Javascript:

<div class="container">
  <h2 class="quotes">first quote</h2>
  <h2 class="quotes">second quote</h2>
  <h2 class="quotes">3rd quote</h2>
</div>

I am trying to convert this jquery into pure vanilla Javascript:


  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

So far I have manage to convert it to this in pure javascript:


  let quotes = document.getElementsByClassName("quotes");
  let quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

I am seeing an error of quotes.eq is not a function and am unsure how to fix this.

Any suggestions much appreciated.

Thanks

Tags:

2

Answers


  1. 0

    document.getElementsByClassName returns an HTML collection so it’s like an array you can access with an index.

    The elements in a collection can be accessed by index (starts at 0).

    Try this

    quotes[quoteIndex % quotes.length]
    Login or Signup to reply.
  2. 0

    eq, fadeIn and fadeOut functions are not vanilla JS functions.
    You can write the code like this for eq function.

    document.querySelectorAll('.quotes')[quoteIndex % quotes.length].textContent = 1254;

    And you should write the code in Vanilla JS for fadeIn and fadeOut. Please referent this link

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

Back To Top
Search