I am using Bootstrap (in Bootstrap Studio) and plain JavaScript. I have colored the background of my <div> element by setting the CSS color to the default color. Now, I am trying to change that CSS color by setting a new value when a new tab is selected.
The goal is to change the background color of tabs and their corresponding content. For example, tab 1 will have a blue background, and tab 2 will have an orange background; the background color will change as you switch between them. I have set the base color by styling the parent div background. (The reason I did not color the tab-content and active tab specifically is that the colored area was not big enough).
Below is the JS function I currently have.
window.addEventListener('load', startup);
async function startup(){
// other functions
await toggleColor();
}
async function toggleColor(){
var menuItm = document.getElementsByName('tabGroup').forEach(item =>{
item.addEventListener('click', event=>{
var bg= document.getElementById('tabDiv');
var bgColor = bg.style.background;
console.log("Old Color: "+bgColor);
bgColor = 'linear-gradient(to bottom right, #ec7429, #843f1d)';
console.log("New Color: "+bgColor);
})
});
}
Bellow is the CSS styling on the parent <div id= ‘tabDiv’> , and for the active tab.
#tabDiv {
background: linear-gradient(to bottom right, #8c3a83, #682b61);
}
#tabList .nav-link.active {
color: #E7E8E9;
background: linear-gradient(to bottom right, #8c3a83, #682b61);
}
Below is the general structure of my HTML.
<div id='tabDiv'>
<ul id='tabList' class='nav nav-tabs flex-column' role='tablist'>
<li id='tabID' class='nav-item' role='presentation' name='’tabGroup'>
<a class='nav-link' role='tab' datta-toggle='tab' href='#tab-1'> TabText </a>
</li>
</ul>
<div class='tab-content'>
<div id='tab-1' class='tab-pane' role='tabpanel'>
<p> Tab Content <p>
</div>
</div>
</div>
When I run the code as it is this is what the console prints out:
Old Color:
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
Old Color:
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
So, I moved the initial CSS styling to the HTML div to look like <div id=’tabDiv’ style=”background: linear-gradient(144deg, #8c3a83, #682b61);”>. I’m using Bootstrap Studio (required by my work place), which gave me that new inline style format.
When running the code with styling in the HTML instead of the CSS files I get this:
Old Color: linear-gradient(144deg, rgb(140, 58, 131), rgb(104, 43, 97))
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
Old Color: linear-gradient(144deg, rgb(140, 58, 131), rgb(104, 43, 97))
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
I have also tried changing the formatting and color type (hex or RGB) of the HTML style declaration, and in the JS function where I set the new color. But the same basic issue of, the Old Color does not actually update/change during my JS function. I have also tried adding the !important to my new color in JS.
I’ve read that this may be an issue with what is being rendered first. As I am new to Bootstrap Studio I have tagged this here. I know that you can change the order of the same file types but is there a way to change the order of CSS vs JS? However, I’m not sure if this is it because in another function I am successfully updating the style.display from ‘none’ to ‘blocked’.
StackOverflow has offered questions similarly worded to my title. Some of them involved properly retrieving the element, and wrapping the function in a window.onload. Both of which I think have working. There is a window.addEventListener('load', function); call at the top of my JS files, and other functions called from that work properly. I have also console logged to check that tabs I am event listening for are being selected successfully and correctly, and the same for the <div id=’tabDib’> I want to change the property of. I have also tried having no default color and changing/adding the new colors in my JS function.
Does the issue lie somewhere in code or logic? Any advice would be appreciated. I know this was long, thank you for reading.
tl;dr Trying to change the styling of an HTML element using a js function but the color is not changing. This sounds like a basic issue but I haven’t found anything that has works.
Thank you @a-meshu for your help! Bellow is the working version of my JS function.
async function toggleColor(){
var menuItm = document.getElementsByName('tabLeft').forEach(item =>{
item.addEventListener('click', event=>{
var bg = document.getElementById('tabDiv');
var bgColor = window.getComputedStyle(bg);
bg.setAttribute('style', 'background: linear-gradient(to bottom right, #ec7429, #843f1d)');
console.log("New Color: "+ bgColor);
})
});
}