Question 43471 in Html Question posted in
Some basic documentation can be found here.

How can i select and edit a part of a textContent – Html

<h1 id="block ">This is my header block</h1>

I want to change the block word’s color every 2 seconds in javascript

let colorss = ["blue", "green", "pink", "purple"]
let curColor = 0
changeColor = () =>{
    let element = document.querySelector("#block")
    element.style.color = colors[curColor]
    curColor++
    if (curColor >3) {
        curColor = 0
    }
    setTimeout(changeColor, 2000)
}
setTimeout(changeColor, 2000)

I did this it works changes the color of h1 tag every 2 seconds.

I wanna apply apply it to "block" word how can i do?

Tags:

3

Answers


  1. 0

    You can wrap the word you want to select in another tag, e.g. <span>.

    let colors = ["blue", "green", "pink", "purple"]
let curColor = 0;
let changeColor = () => {
  let element = document.querySelector("#block > span")
  element.style.color = colors[curColor]
  curColor = (curColor + 1) % colors.length;
  setTimeout(changeColor, 2000)
}
setTimeout(changeColor, 2000)
    <h1 id="block">This is my header <span>block</span></h1>
    Login or Signup to reply.
  2. 0 
    let colors = ["blue", "green", "pink", "purple"]
      let curColor = 0, nIntervId

      changeColor = () => {
         let element = document.querySelector("#block > span")
         //element.style.cssText = "color:" + colors[curColor]
         element.style.color = colors[curColor]
         curColor = ++curColor % 3
      }

      function initChangeColor() {
         if (!nIntervId) {
            nIntervId = setInterval(changeColor, 2000)
         }
      }

      function stopchangeColor() {
         //call this to stop color changing
         clearInterval(nIntervId)
         nIntervId = null
      }
      
      initChangeColor()  
    <!DOCTYPE html>
<html lang="en">

   <head>
      <meta charset="UTF-8">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
   </head>

   <body>
      <h1 id="block">This is my header <span id="multicolor">block</span></h1>
   </body>


</html>
    Login or Signup to reply.
  3. 0

    I agree with the two solutions!

    But if you want to set your color at start and don’t want a black block.

    You can do this :

    In addition, you may pass the colors array and the desired selector as an argument in your function.

            let colors = ["blue", "green", "pink", "purple"];
        let curColor = null;
        let interval;
        let element;
        let query = "#block > span";
    
    function changeColor(cols,query){
        element = document.querySelector(query);
        if(curColor === null){
            curColor = 0;
        }
        element.style.color = cols[curColor];
        curColor = (curColor + 1) % colors.length;
    }
    window.addEventListener("DOMContentLoaded",() => {changeColor(colors,query);})
    interval = setInterval(changeColor,2000,colors,query);
        <h1 id="block">This is my header <span>block</span></h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search