The question is to write a code in pure javascript that allows you to add and delete a class every certain n seconds. Here is the code I actually work with, but the method I used fails and time gets lost. I will be glad to any help.

<script> var scaleElem = document.getElementById('par_mak'); setInterval(myMethod_one, 6000); function myMethod_one( ) { scaleElem.classList.add('infi_anim'); } setInterval(myMethod_second, 12000); function myMethod_second( ) { scaleElem.classList.remove('infi_anim'); } </script>

The idea is that the element would move with a certain frequency, to attract attention.

    2 answers 2

    If the time should be the same between adding / deleting a class, you can simply create a flag that indicates whether to add or remove a class.

     var scaleElem = document.getElementById('par_mak'); var addClass = true; setInterval(addClassToScaleElem, 1000); function addClassToScaleElem( ) { var classList = scaleElem.classList; if (addClass) { classList.add('infi_anim'); } else { classList.remove('infi_anim'); } addClass = !addClass; } 
     #par_mak { width: 30px; height: 30px; background: blue; transition: all .3s linear; } .infi_anim { background: black !important; } 
     <div id="par_mak"></div>

    If different, then again in one method you can clear it - clearInterval(interval) and re-run - interval = setInterval(addClassToScaleElem, counter);

       var scaleElem = document.getElementById('par_mak'); setInterval(myMethod_one, 3000); function myMethod_one( ) { scaleElem.classList.add('infi_anim'); setTimeout(function(){ scaleElem.classList.remove('infi_anim'); }, 300); } 
       .red-square { width:200px; height:200px; background:red; } .infi_anim { width:250px; height:150px; background:green; } 
       <div class="red-square" id="par_mak"> </div>