Context: I'm trying to change the color of a text according to a if statement (Green if returnOfInvestment >= 0 red if this isn't true) however, it doesn't seem to be working. I've searched on SO already, but can't figure out why it isn't working as expected.
var returnOfInvestment = (netProfit / initialInvestment.value) * 100;
var valEl = document.querySelector(".number dashtext-2");
var portfolioEl = document.querySelector(".number dashtext-3");
if (returnOfInvestment >= 0) {
valEl.style.color = "green";
portfolioEl.style.color = "green";
} else {
valEl.style.color = "red";
portfolioEl.style.color = "red";
}
.dashtext-2 {
color: #27b83f !important;
}
.dashtext-3 {
color: #27b83f !important;
}
<div class="col-md">
<div class="statistic-block block">
<div class="progress-details d-flex align-items-end justify-content-between">
<div class="title">
<div class="icon"><i class="icon-bars"></i></div>
<strong><div class="valdeval"></div></strong>
</div>
<div class="number dashtext-2">
<div class="valorization"></div>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="statistic-block block">
<div class="progress-details d-flex align-items-end justify-content-between">
<div class="title">
<div class="icon"><i class="icon-pie-chart"></i></div><strong> Portfolio</strong>
</div>
<div class="number dashtext-3">
<div class="totalportfolio"></div>
</div>
</div>
</div>
</div>
Give the elements you want to style a class and use CSS to apply a green text-color.
Create a class within CSS for a red text-color like: .color-red { color: red; }
Change the script slightly as below. Use classList.remove('.color-red'); to remove the class that changes the text-color to red or the same function with .add instead of .remove to apply the class for the red tex-color.
function changeStyle() {
var returnOfInvestment = document.getElementById('input-number').value;
var valEl = document.querySelector('.random-element'),
portfolioEl = document.querySelector('.portfolio-element');
if (returnOfInvestment >= 0) {
valEl.classList.remove('color-red');
portfolioEl.classList.remove('color-red');
} else {
valEl.classList.add('color-red');
portfolioEl.classList.add('color-red');
}
}
.random-element,
.portfolio-element {
color: green;
}
.color-red {
color: red;
}
<input type="number" id="input-number" name="input-number" onchange="changeStyle()">
<h1 class="random-element">Random element</h1>
<h1 class="portfolio-element">Portfolio element</h1>
Alternativly you could add a specific class to all elements you want to change color for. Then you can use this instead:
var allEL = document.querySelectorAll('.class-name');
if (returnOfInvestment >= 0) {
allEL.forEach(el => el.classList.remove('color-red'));
} else {
allEL.forEach(el => el.classList.add('color-red'));
}
}
That will apply/remove the class of all elements with a specific class. Really helpfull if you need to apply changes to multiple elements.
Related
I would like to automate duplicating a class from a parent div to each separate child span based on a word.
As an example:
parent div contains the following classes: grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded
I would like to duplicate any classes within the parent div with the precursor "tag-" and place them into each separate child span. In this case, the parent div contains the classes with the initial "tag-" word: tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white
Some other parent divs will contain other classes that contain the initial word "tag-"
The "tag-" classes can be different in other parent divs but there will always be 5 "tag-" classes. As an example, a different parent div may contain the following classes with the initial "tag-" word: tag-smart-style tag-casual tag-modern tag-red tag-black tag-green
I already have a code snippet but this is locked in to 5 specific "tag-" classes. Here is the code:
let classMap = {
"tag-street-style": ".colour-tag-1",
"tag-slender": ".colour-tag-2",
"tag-navy": ".colour-tag-3",
"tag-grey": ".colour-tag-4",
"tag-white": ".colour-tag-5",
};
I would like the first "tag-" class identified within the parent div to be duplicated into "colour-tag-1" within the first child span.
Then I would like the second "tag-" class identified within the parent div to be duplicated into "colour-tag-2" within the second child span.
Then I would like the third "tag-" class identified within the parent div to be duplicated into "colour-tag-3" within the third child span.
Then I would like the fourth "tag-" class identified within the parent div to be duplicated into "colour-tag-4" within the fourth child span.
Then I would like the fifth "tag-" class identified within the parent div to be duplicated into "colour-tag-5" within the fifth child span.
$(document).ready( function() {
$(".grid-item .grid-meta-wrapper").each(function(e){
$(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span></div>');
});
let classMap = {
"tag-street-style": ".colour-tag-1",
"tag-slender": ".colour-tag-2",
"tag-navy": ".colour-tag-3",
"tag-grey": ".colour-tag-4",
"tag-white": ".colour-tag-5",
};
for (let cls in classMap) {
document.querySelector(classMap[cls]).classList.add(cls);
}
});
<style>
.tag-street-style {
background-color: purple;
}
.tag-slender {
background-color: red;
}
.tag-navy {
background-color: blue;
}
.tag-grey {
background-color: grey;
}
.tag-white {
background-color: black;
color: white;
}
.tag-red {
background-color: black;
color: red;
}
.tag-black {
background-color: white;
color: black;
}
.tag-green {
background-color: black;
color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt </div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br><br><br>
<div class="grid-item tag-smart-style tag-casual tag-modern tag-red tag-black tag-green is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt </div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
First, here is a testable solution:
$(document).ready( function() {
$(".grid-item .grid-meta-wrapper").each(function(e){
$(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span></div>');
});
let classes = [...document.getElementById("tag-specifier").classList].filter(item => item.indexOf("tag-") === 0);
for (let index = 0; index < classes.length; index++) {
let currentItem = document.querySelector(".colour-tag-" + (index + 1));
if (currentItem !== null) {
currentItem.classList.add(classes[index]);
}
}
});
.tag-street-style {
background-color: purple;
}
.tag-slender {
background-color: red;
}
.tag-navy {
background-color: blue;
}
.tag-grey {
background-color: grey;
}
.tag-white {
background-color: black;
color: white;
}
.tag-red {
background-color: black;
color: red;
}
.tag-black {
background-color: white;
color: black;
}
.tag-green {
background-color: black;
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tag-specifier" class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt </div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
Now, let's understand it:
I have added the id of tag-specifier to the element which has the classes, so the code will have an easy time finding the classes to work with
document.getElementById("tag-specifier").classList is returning an object of key-value pairs where the keys are indexes (starting from 0) and the values are class names
I convert the result of classList into an array via [...document.getElementById("tag-specifier").classList] because I intend to use the filter() function of the array, alternatively I could have written a loop with similar effect
.filter() is being called for the newly converted array. This function takes a callback (more on that below) that determines which items we are interested about from the array and returns an array that contains only the items that the callback found interesting
a callback is a function that is scheduled to be executed at some future point of time
in our case, the callback of .filter() is a function which will be executed for each elements of the array and will evaluate them whether they are interesting
our callback is item => item.indexOf("tag-") === 0, which is a function (we use the arrow operator => to differentiate the parameter, which is item and the actual function body, which is item.indexOf("tag-") === 0), that is, we are only interested about items whose name starts with tag-
after the call for .filter(), the value assigned to classes is an array of class names that only holds valuable class names from our perspective, that is, class names starting with tag-
we loop classes using a variable we create for this purpose, named index
we search for the element that corresponds to the selector of ".colour-tag-" + (index + 1). The reason for the index + 1 is that Javascript arrays are 0-indexed and your tag indexes start from 1
note that (index + 1) is enclosed into parantheses. The reason for this is that + is an operator that acts both as concatenator and numeric addition and evaluates from left-to-right, that is, without the paranthesis around (index + 1) the result of ".colour-tag-" + index + 1 would be looking like .colour-tag-01 instead of .colour-tag-2
we check whether currentItem exists, so we program defensively, so, if any anomaly occurs, we intend our code to handle it gracefully
if currentItem existed, then we add the current class, which is classes[index]
EDIT
The initial solution I have implemented was assuming that we deal with a single such case, while your problem included multiple similar cases on the same page. To solve this issue, I have added an extra layer to the solution, querying the roots of all relevant subtrees in HTML and using them as the context of their respective problem-spaces.
Here is a snippet that illustrates it (yes, the first 3 tags will be unstyled, but this is not due to the logic of the code, but it is rather due to the styling specification of the structure):
$(document).ready( function() {
$(".grid-item .grid-meta-wrapper").each(function(e){
$(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span><span class="product-view-item-colour-tag colour-tag-6">tag6</span></div>');
});
for (let context of $(".list-grid .grid-item")) {
let idDeclaration = context.id;
let classes = [...context.classList].filter(item => item.indexOf("tag-") === 0);
for (let index = 0; index < classes.length; index++) {
let currentItem = context.querySelector(".colour-tag-" + (index + 1));
if (currentItem !== null) {
currentItem.classList.add(classes[index]);
}
}
}
});
.product-view-item-colour-tags .tag-navy {
background-color: blue;
}
.product-view-item-colour-tags .tag-grey {
background-color: grey;
}
.product-view-item-colour-tags .tag-white {
background-color: black;
color: white;
}
.product-view-item-colour-tags .tag-red {
color: red;
}
.product-view-item-colour-tags .tag-black {
background-color: white;
color: black;
}
.product-view-item-colour-tags .tag-green {
color: green;
}
.product-view-item-colour-tags .tag-yellow {
background-color: black;
color: yellow;
}
.product-view-item-colour-tags .tag-orange {
color: orange;
}
.product-view-item-colour-tags .tag-pink {
color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-grid">
<div id="thumb-product-3-9" class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 1</div>
<div class="grid-prices">
<div class="product-price">
<span>9.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br>
<div id="thumb-product-3-12" class="grid-item tag-social-style tag-thicker tag-premium tag-green tag-black tag-red is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 2</div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br>
<div id="thumb-product-3-1" class="grid-item tag-outdoor-style tag-warmer tag-premium tag-pink tag-white tag-orange is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 3</div>
<div class="grid-prices">
<div class="product-price">
<span>14.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br>
<div id="thumb-product-3-4" class="grid-item tag-street-style tag-slender tag-casual tag-green tag-yellow tag-red is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 4</div>
<div class="grid-prices">
<div class="product-price">
<span>15.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
</div>
please I need solution for my design program, with clonenode/copy
from one big div where user can choose what he would have on concretly id/content, so he could switch it with arrows or choose from dropdown menu,
but I have now solution only with appenchild from div
and, if user add some next content, next id, it will have same big div / it will duplicated so the file will bigger ....
so I need have only one big div from where it will clone or copy to concretly div and this div will not duplicate
many thanks for yours answers
const
dGet = document.getElementById('get')
, dBack = document.getElementById('back')
, slides = document.querySelectorAll('.mySlides')
, slideSelect = document.querySelector('#slide-Selector')
, current =
{ slide : null
, index : 0
, len : slides.length
};
slideSelect.onchange =()=>
{
current.index = slideSelect.selectedIndex;
plusDivs(0);
}
// init
plusDivs(0);
function plusDivs(n)
{
// more easy with a modulo...
current.index = (current.index +n +current.len) % current.len;
if (current.slide)
dBack.appendChild( current.slide );
current.slide = dGet.appendChild( slides[current.index] );
slideSelect.selectedIndex = current.index; // added
}
#get {
height : 300px;
width : 500px;
border : 1px solid red;
left : 100px;
position : absolute;
}
#back {
display : none;
}
<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<select id="slide-Selector">
<option>slideshow1</option>
<option>slideshow2</option>
<option>slideshow3</option>
</select>
<div id="back">
<div id="one" class="mySlides">
<span class="Tx1">slideshow1</span>
</div>
<div id="two" class="mySlides">
<span class="Tx1">slideshow2</span>
</div>
<div id="three" class="mySlides">
<span class="Tx1">slideshow3</span>
</div>
</div>
<div id="get"></div>
I used removeChild and cloneNode:
const
dGet = document.getElementById('get')
, dBack = document.getElementById('back')
, slides = document.querySelectorAll('.mySlides')
, slideSelect = document.querySelector('#slide-Selector')
, current =
{ slide : null
, index : 0
, len : slides.length
}
;
slideSelect.onchange =()=>
{
current.index = slideSelect.selectedIndex;
plusDivs(0);
}
// init
plusDivs(0);
function plusDivs(n)
{
// more easy with a modulo...
current.index = (current.index +n +current.len) % current.len;
if (current.slide)
dGet.removeChild( current.slide );
var clon = slides[current.index].cloneNode(true);
current.slide = dGet.appendChild(clon);
slideSelect.selectedIndex = current.index; // added
}
#get {
height : 300px;
width : 500px;
border : 1px solid red;
left : 100px;
position : absolute;
}
#back {
display : none;
}
<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<select id="slide-Selector">
<option>slideshow1</option>
<option>slideshow2</option>
<option>slideshow3</option>
</select>
<div id="back">
<div id="one" class="mySlides">
<span class="Tx1">slideshow1</span>
</div>
<div id="two" class="mySlides">
<span class="Tx1">slideshow2</span>
</div>
<div id="three" class="mySlides">
<span class="Tx1">slideshow3</span>
</div>
</div>
<div id="get"></div>
I ran into a problem that when I click on the button, it just flips the icon but only makes the invisible fields visible on the second click. Are there any idea how to do it?
(Heres a gif to show my problem: https://ibb.co/cvz7pWC )
Also heres my code :
function moreSoc() {
var moresoc = document.getElementById("moresoc");
var btnText = document.getElementById("mbtn");
if (moresoc.style.display === "none" ) {
moresoc.style.display = "block";
mbtn.innerHTML = "More ▲";
} else {
moresoc.style.display = "none";
mbtn.innerHTML = "More ▼"
}
}
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn" onclick="moreSoc()">More ▲</button>
</div>
<section class="social-links" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>
This could be to do with you not being to read element.style.display as none the first time round. This is because it has not yet been set by JavaScript, but just by css. I suggest changing your if statement to check for not "block".
function moreSoc() {
var moresoc = document.getElementById("moresoc");
var btnText = document.getElementById("mbtn");
if (moresoc.style.display != "block" ) {
moresoc.style.display = "block";
mbtn.innerHTML = "More ▲";
} else {
moresoc.style.display = "none";
mbtn.innerHTML = "More ▼"
}
}
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn" onclick="moreSoc()">More ▼</button>
</div>
<section class="social-links" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>
ElementCSSInlineStyle.style only returns (or sets) inline styles on an element. On your first click there is no inline display property to read so your condition sets it to none. On the second click your condition finds none and sets it to block.
The answer to look for !block solves this immediate problem but it stills ties your styling to your js rather than keeping it in your CSS. This means that if the default display property of your div needs to change in your layout (inline-block, flex, etc) you would need to change it in your js as well as your CSS.
For this reason I would recommend not using inline styles at all but rather rather use Element.classList to manage applied styles from your CSS – in this case just the adding/removing of a .hidden class that sets display to none without having to know what the appropriate visible display default is.
Also, since you are querying the button element in your code anyway, it would be better to apply the click listener from your js as well rather than inline.
function moreSoc() {
const moresoc = document.getElementById("moresoc");
if (moresoc.classList.contains('hidden')) {
moresoc.classList.remove('hidden');
mbtn.innerHTML = "More ▲";
} else {
moresoc.classList.add('hidden');
mbtn.innerHTML = "More ▼"
}
}
const mbtn = document.getElementById("mbtn");
mbtn.addEventListener('click', moreSoc);
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
}
.hidden {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn">More ▲</button>
</div>
<section class="social-links hidden" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>
I got html structure like this:
<body>
<div class="container">
<span class="block done" id="1"></span>
<span class="block" id="2"></span>
<span class="block" id="3"></span>
<span class="block" id="4"></span>
<span class="block" id="5"></span>
</div>
<script src="loaders.js"></script>
</body>
My current goal is to add every 1s class "done" (its some kind of simple loading bar) to spans one by one and when last span got "done" class everything restart and loop over and over. Can someone help me how to write this in vanilla JavaScript?
You could do it like this:
var blocks = document.getElementsByClassName('block');
(function animateProgress(n) {
for (var i = 0; i < blocks.length; i++) {
blocks[i].classList[i < n ? 'add' : 'remove']('done');
}
setTimeout(function() {
animateProgress((n + 1) % (blocks.length + 1));
}, 400);
})(0);
.block {
float: left;
background: #eceded;
padding: 1em;
margin: 1px;
}
.block.done {
background: #7be47b;
}
<div class="container">
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
</div>
This question already has answers here:
How to change div background color on button click?
(2 answers)
Closed 3 years ago.
I'm very new to coding and have learned my very limited knowledge from forums and tutorials online. I seem to be up against a problem that I cannot for the life of me figure out.
My goal is to press one of three buttons (Leadership, Program, Team) at the top of a grid (the grid lists our services) and have the appropriate grid box change colors. For example, pressing the Leadership button would turn a grid box blue, Program would turn a grid box yellow, and Team would turn a grid box green. This means that a grid box might be linked to more than one of the buttons, as our services overlap. So depending on what button is pressed, a single grid box might change to blue, yellow, or green.
I figured out how to do toggle buttons which show the body onclick. BUT that means A LOT of redundancy. (I would have to do a grid with the appropriately colored boxes for Leadership, another one for Program, and another one for Team). So, I think I'm on the wrong path there.
I've searched toggles, buttons, anchors, event listeners, targets, you name it. It seems like it all relates to the button itself, not how the button relates to an element on the page.
I am very grateful to anyone who can point me in the right direction! Thank you!
function goToAnchor(anchor) {
var loc = document.location.toString().split('#')[0];
document.location = loc + '#' + anchor;
return false;
}
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.square-grey {
display: table-cell;
height: 100px;
width: 600px;
text-align: center;
vertical-align: middle;
border-radius: 5%;
/*make it pretty*/
background: #F5F5F5;
color: #999999;
padding: 10px 15px 10px 15px;
font: 20px "helvetica";
font-weight: 350;
box-shadow: 2px 3px 3px #999999;
}
div.highlit {
padding: 25px;
}
<div class="row">
<div class="buttons">
<div style="text-align:center">
<div class="col-sm-4">
Enterprise
</div>
<div class="col-sm-4">
Program
</div>
<div class="col-sm-4">
Team
</div>
</div>
</div>
</div>
<div class="inner_div">
<div id="Div1">
<div class="row">
<div style="text-align:center">
<div class="col-sm-3">
<div class="top-buffer">
<div class="square-grey">
Strategic Alignment
</div>
</div>
</div>
<div class="col-sm-3">
<div class="top-buffer">
<div class="square-grey">
Adaptive Leadership
</div>
</div>
</div>
<div class="col-sm-3">
<div class="top-buffer">
<div class="square-grey">
Portfolio Management
</div>
</div>
</div>
<div class="col-sm-3">
<div class="top-buffer">
<div class="square-grey">
Cultural Shift
</div>
</div>
</div>
</div>
</div>
</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
</div>
</div>
Edited answer, you can add IDs to the boxes and pass them to function.
const changeColor = (elements, color) => {
elements.forEach(el => {
const element = document.querySelector(el);
element.style.backgroundColor = color;
})
}
.colorbox {
width: 100px;
height: 100px;
background-color: aquamarine;
margin-bottom: 10px;
}
<div class="colorbox" id="colorbox1"></div>
<div class="colorbox" id="colorbox2"></div>
<div class="colorbox" id="colorbox3"></div>
<button onclick="changeColor(['#colorbox1', '#colorbox3'], 'tomato')">Change 1 & 3 to tomato</button>
<button onclick="changeColor(['#colorbox1', '#colorbox2'], 'aliceblue')">Change 1 & 2 to aliceblue</button>
<button onclick="changeColor(['#colorbox2', '#colorbox3'], '#ff0000')">Change 2 & 3 to reddest</button>