i want to make logos to change color every second with this transition

i{
  color: blue; 
  transition: color .5s;
}

i want to logos in i class to smoothly change color from white to red in loop

this is part of code of my website

    <div >
      <div id="aboutMe" >
        <h1 >igorekowo >_<</h1>
        <h1 id="typedText" >owo
        </h1>
        <a href="https://open.spotify.com/artist/..." target="_blank">
          <i  style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://discordapp.com/users/..." target="_blank">
          <i  style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://youtube.com/..." target="_blank">
          <i  style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://www.tiktok.com/..." target="_blank">
          <i  style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
        <a href="https://instagram.com/..." target="_blank">
          <i  style="font-size:36px; text-shadow: 0 0 0.10em rgb(255, 255, 255);"></i>
        </a>
      </div>  
    </div>
    <script src="js/main.js"></script>
    <script>
      type(["(*≧ω≦*)", "i luv igorekowo :3", "meow ^_^"], typewriterElement,textIndex,charIndex,isDeleting, isLineVisible);
      updateTitle("kys.mom <3 ");
    </script>
    <script>
var colors = ['white', 'red'];
var active = 0;
setInterval(function(){
    document.querySelector('i').style.color = colors[active];
    active  ;
    if (active == colors.length) active = 0;
}, 1500);
    </script>
  </body>
</html>

i found code to change background color and remade it to change color of logos but it only change 1 logo, and i dont know how to make that it change all 5 logos

(this is the code that i remade)

    <script>
var colors = ['white', 'red'];
var active = 0;
setInterval(function(){
    document.querySelector('i').style.color = colors[active];
    active  ;
    if (active == colors.length) active = 0;
}, 1500);
    </script>

CodePudding user response：

You are using document.querySelector which returns the first element that it finds a match to. Instead you need to use document.querySelectorAll which returns a list of ALL matching elements.

Do this to loop over your element matches. Note that I moved the selector to be OUTSIDE of the setInterval since there's no need to keep selecting the same elements every iteration. Just select them once, save to a variable, and then modify on each iteration

const colors = ['white', 'red'];
let active = 0;
const iconElements = document.querySelectorAll('i');

setInterval(function(){
  iconElements.forEach(el => el.style.color = colors[active]);
  active  ;
  if (active == colors.length) active = 0;
}, 1500);

CodePudding user response：

Put in this code in your script tag to change the colours of the logos in an interval:

var allLogos = document.querySelectorAll('i')    
    var currentLogoIndex = 0
    const interval = setInterval(function () {
        
        const colourLogo = (index, color) => {
            allLogos[index].style.color = color
        }

        // First Logo
        if(currentLogoIndex===0){
            colourLogo(allLogos.length - 1, "blue")
            colourLogo(currentLogoIndex, "red")
        }

        // Middle Logos
        else if(currentLogoIndex>0 && currentLogoIndex < allLogos.length - 1){
            colourLogo(currentLogoIndex, "red")
            colourLogo(currentLogoIndex - 1, "blue")
        }
        
        // Last logo
        else{
            colourLogo(currentLogoIndex, "red")
            colourLogo(currentLogoIndex - 1, "blue")
            currentLogoIndex = -1
        }
        currentLogoIndex  

        
    }, 1000);