-1

I want to rewrite the jQuery code below in pure JavaScript to save loading time.

Here is the link to the demo page.

var playstate = function (){
    $(".magicwand").addClass("logo-effect");
setTimeout(function () {
    $(".magicwand").removeClass("logo-effect");
        }, 6000);
}
playstate();
setInterval(playstate, 6100);
jwpfox
  • 5,124
  • 11
  • 45
  • 42
Avinash Deshmukh
  • 11
  • 4
  • 1
    Depends on your browser support. The closest analog to the jQuery selector engine would be [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and [`document.querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll). Adding and removing classes would be achieved with the [`classList` methods](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). If you need to support older browsers, you'll need to use different means of traversing/selecting in the DOM. – Alexander Nied Oct 19 '16 at 20:04
  • You might just check [Plain JS](https://plainjs.com/javascript/) site for what you are looking for. – Redu Oct 19 '16 at 20:05
  • Possible duplicate of [add class with javascript](http://stackoverflow.com/questions/17944843/add-class-with-javascript) – mx0 Oct 19 '16 at 20:21
  • @Avinash Deshmukh : Your given demo link is not opening somehow, but i have posted my answer on my own prediction , let me know. – Jigar7521 Oct 20 '16 at 04:27
  • @JigarPrajapati Thanks mate! But the code you have suggested does not work. Please check the link (have modified). – Avinash Deshmukh Oct 20 '16 at 06:40
  • I have just did what seems like as you were want Man not exact what your needs, as at that time your link was not worked – Jigar7521 Oct 20 '16 at 06:43

1 Answers1

0

Try this: I have converted your jquery code to pure javascript.

var playstate = function() {
  var element = document.getElementsByClassName("magicwand");
  element[0].classList.add("logo-effect");
  setInterval(function() {
    var element = document.getElementsByClassName("magicwand");
    element[0].classList.remove("logo-effect");
  }, 6000);
}
playstate();
setInterval(playstate, 6100);
<div class="magicwand">test</div>
Jigar7521
  • 1,549
  • 14
  • 27