0

I have multiple h2 enclosed lines of text. The h2 color is specified in the style section. I am changing backgrounds and, because of contrast issues, also need to change the text when the transition background script int++ in the while loop hits a certain value of if int===. The 'h2' lines are contained in some HTML5 nested 'divs'. I have tried attaching color to the 'div' 'id's but failed there and have since moved on successfully, but with potentially massive overhead as a generic solution, to setting a class="forColorChange" in each h2 tag. However, with multiple lines of text it gets tedious to write out and access each one individually. Is there a code line of JavaScript that basically says in a batch efficiency, turn every 'h2' or, everything class tagged with forColorChange, from (the style section) color: Green to in one swoop, 'color:Orange'? My copy and paste runnable HTML5 skeletal stub is in the code section below.

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<title>Change Font Color of Multiple <code><H2></code> Lines</title>
<!-- <link rel="stylesheet" type="text/css" href="./CSS-MasterStyle2019.css"/> -->
<style>
div#masterPoetryBlockDiv { }      
main#mainStyle { }
article#articleStyle { }
.general-formatting-1 { text-indent:5em; }
.general-formatting-2 { text-indent:10em; }
.forColorChange { } 

h1 { text-shadow: 1px 0px 1px Purple, 2px -1px 2px Gray;
color:LightBlue;
}
h2 {/* text-shadow: 1px 0px 1px Purple, 2px -1px 2px Gray; */
color:Yellow;
}
body, #b0 { 
background-color: RGB(190, 181, 168) ; 
background-image: url('./Your-0.jpg') ; 
position: relative ; 
z-index: -2 ; 
background-position: center top ; 
background-repeat: no-repeat ; 
background-attachment: fixed ;  
background-size: cover ;  
transition: background 0ms ease-in-out 400ms; 
} 
#b1 { 
background-color: DarkGray ; 
background-image: url('./Your-1.jpg') ; 
position: relative ; 
z-index: -2 ; 
background-position: center top ; 
background-repeat: no-repeat ; 
background-attachment: fixed ; 
background-size: cover ;  
transition: background 500ms ease-in-out 400ms;
}
#b2 { 
background-color: rgb(46, 46, 46) ; 
background-image: url('./Your-2.jpg') ; 
position: relative ; 
z-index: -2 ; 
background-position: center top ; 
background-repeat: no-repeat ; 
background-attachment: fixed ;  
background-size: cover ;  
  transition: background 500ms ease-in-out 0ms; 
}
</style>
<script>
var int = 0;
function shiftbackgrd(interval, frames)
{"use strict";
var swap = window.setInterval(IncrementCuckooBkgrnds, interval);
    function IncrementCuckooBkgrnds()
    {
    if(int === 2 ) {clearInterval(swap);}

        while (int !== 2 )
        {
            int++;
            document.body.id = "b"+int;

/* Asking the question for an easier BATCH type color change of all Tag '<h2>' (or by class 'forColorChange') and do away with the heavy overhead within the 'ifs' below where every individual line, albeit successful, is being accessed. It is definitely not good for a large number of lines or a high int count.*/
var colorCall = ["Red", "SkyBlue"];
const changeColor = document.getElementsByClassName("forColorChange");
if(int === 1) {
changeColor[0].style.color = colorCall[0];
changeColor[1].style.color = colorCall[0];
changeColor[2].style.color = colorCall[0];
changeColor[3].style.color = colorCall[0];
changeColor[4].style.color = colorCall[0];
changeColor[5].style.color = colorCall[0];
changeColor[6].style.color = colorCall[0];
}
if(int === 2) {
changeColor[0].style.color = colorCall[1];
changeColor[1].style.color = colorCall[1];
changeColor[2].style.color = colorCall[1];
changeColor[3].style.color = colorCall[1];
changeColor[4].style.color = colorCall[1];
changeColor[5].style.color = colorCall[1];
changeColor[6].style.color = colorCall[1];
}
            if(int !== 2 ) {break;}
        }
    }
}
shiftbackgrd(2400, 3); //milliseconds, frames
</script>
</head>
<body>
<div id="masterPoetryBlockDiv">
<main id="mainStyle">
<article id="articleStyle">
<br/><h1 class="general-formatting-1">Cuckoo Clock Schematics</h1><br/>
<h2 class="forColorChange general-formatting-1">Most times</h2>
<h2 class="forColorChange general-formatting-2">one's cuckoo clock</h2>
<h2 class="forColorChange general-formatting-2">interpretation of reality,</h2>
<h2 class="forColorChange general-formatting-1">Is bigger</h2>
<h2 class="forColorChange general-formatting-2">than one's ability</h2>
<h2 class="forColorChange general-formatting-2">to comprehend</h2>
<h2 class="forColorChange general-formatting-2">its workings.</h2>
</article>
</main>
</div>
</body>
</html>
GladHeart
  • 51
  • 9
  • Does this answer your question? [How to get element by class name?](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) – Justinas Sep 18 '20 at 08:24

1 Answers1

1

Yes, you can do this with CSS by adding/removing a class from whatever container has all of these h2s in it (body if there's nothing closer). Define classes for the colors you want with h2 as a descendant, e.g.:

.some-category h2 {
    color: whatever;
}
.another-category h2 {
    color: something;
}

...and then based on the calcuation you're doing, add/remove some-category, another-category, etc. from the container.

Live Example:

const categories = [
    "some-category",
    "another-category",
    "yet-another-category",
];
let i = 0;
setInterval(() => {
    ++i;
    const container = document.getElementById("container");
    for (const cat of categories) {
        container.classList.remove(cat);
    }
    container.classList.add(
        categories[i % categories.length]
    );
}, 800);
.some-category h2 {
    color: blue;
}
.another-category h2 {
    color: green;
}
.yet-another-category h2 {
    color: red;
}
<h2>I'm not in the container.</h2>
<div id="container">
    <h2>I'm an <code>h2</code> in the container.</h2>
    <p>I'm in the container but not an <code>h2</code></p>
    <h2>I'm another <code>h2</code> in the container.</h2>
    <h2>So am I.</h2>
    <p>I'm in the container but not an <code>h2</code></p>
</div>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    Thank you greatly @T.J. Crowder. The question has been closed as unintelligible. I am working on re-asking it and showing my (skeletal) code. I guess simplicity doesn't always make sense. I am an amateur, situationally taught, novice-intermediate :-) when it comes to javascript. Your understanding, attention, answer and, code was first class. It is a great working solution. I have yet to apply it to my iterations but is obviously the solution. When I have merged your code and fathomed the '(const cat of categories)' line, I will post the result and gratefully mark you solution as the answer. – GladHeart Sep 19 '20 at 00:46
  • Excellent working answer. Thank you @T.J. Crowder!! – GladHeart Sep 20 '20 at 18:33