What is the process for choosing and making changes to a specific portion of a textContent?

Question

What is the process for choosing and making changes to a specific portion of a textContent?

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

To dynamically change the color of the "block" word every 2 seconds using JavaScript:

let colors = ["blue", "green", "pink", "purple"];
let curColor = 0;
const changeColor = () => {
    let text = document.querySelector("#block");
    text.innerHTML = text.innerText.replace("block", `<span style="color: ${colors[curColor]}">block</span>`);
    curColor++;
    if (curColor > 3) {
        curColor = 0;
    }
    setTimeout(changeColor, 2000);
}
setTimeout(changeColor, 2000);

This code will change the color of the word "block" within the h1 tag every 2 seconds.

If needed for another element, replace "#block" in the querySelector with the appropriate selector.

javascript html css

Answer 1

Answer №1

One way to highlight a specific word is by enclosing it in another tag, such as <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>

Answer 2

One way to highlight a specific word is by enclosing it in another tag, such as <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>

Answer 3

Answer №2

const shades = ["red", "yellow", "orange", "brown"]
      let currentShade = 0, intervalId

      changeShade = () => {
         let selectedElement = document.querySelector("#box > span")
         //selectedElement.style.cssText = "color:" + shades[currentShade]
         selectedElement.style.color = shades[currentShade]
         currentShade = ++currentShade % 4
      }

      function initializeShadeChange() {
         if (!intervalId) {
            intervalId = setInterval(changeShade, 2500)
         }
      }

      function stopShadeChange() {
         //execute this to halt shade transition
         clearInterval(intervalId)
         intervalId = null
      }
      
      initializeShadeChange()

<!DOCTYPE html>
<html lang="en">

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

   <body>
       <h1 id="box">This is my display <span id="multicolored">panel</span></h1>
  </body>


</html>

Answer 4

const shades = ["red", "yellow", "orange", "brown"]
      let currentShade = 0, intervalId

      changeShade = () => {
         let selectedElement = document.querySelector("#box > span")
         //selectedElement.style.cssText = "color:" + shades[currentShade]
         selectedElement.style.color = shades[currentShade]
         currentShade = ++currentShade % 4
      }

      function initializeShadeChange() {
         if (!intervalId) {
            intervalId = setInterval(changeShade, 2500)
         }
      }

      function stopShadeChange() {
         //execute this to halt shade transition
         clearInterval(intervalId)
         intervalId = null
      }
      
      initializeShadeChange()

<!DOCTYPE html>
<html lang="en">

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

   <body>
       <h1 id="box">This is my display <span id="multicolored">panel</span></h1>
  </body>


</html>

Answer 5

Answer №3

I concur with the proposed solutions!

If you prefer to initialize your color and avoid a black block, try this approach:

Furthermore, you can include the colors array and selector as arguments 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>

Answer 6

I concur with the proposed solutions!

If you prefer to initialize your color and avoid a black block, try this approach:

Furthermore, you can include the colors array and selector as arguments 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>

What is the process for choosing and making changes to a specific portion of a textContent?

Answer №1

Answer №2

Answer №3

Similar questions

Fixing Cross-Browser Issues with the OnScroll Function

What methods can be used to construct components using smaller foundational components as a base?

HTML source does not contain nested link elements for linked areas with nested hyperlinks

Discover a non-null string within a deeply nested data structure

Six Material-UI TextFields sharing a single label

What is the best way to change an array of strings into a single string in JavaScript?

When the submit button on the signup form is pressed, two distinct actions are activated to achieve specific outcomes

A guide on extracting information from a personal Flask JSON route endpoint with Axios

How to format time in Node.js using PostgreSQL

How can you properly structure chainable functions in Angular?

Should a Service Worker be automatically installed on each page reload, or only when a user navigates to a new page?

Information vanishes as the element undergoes modifications

Is there a way to access fields from an associated model within React components?

Determining the file path relative to the project/src directory in Node.js

Guide to showcasing a placeholder in MUI's Select component

The compiler throwing an error claiming that the indexOf method is not a valid

Are promises perpetually in a state of limbo? (incorrect format

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off

Using the OR operator in a JSON server

Obtain the URL for making an asynchronous request using PHP and SQL