Bootstrap Studio - The style property of my `<div>` element is not changing during my JS function

Question

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.

Answer 1

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);
                
        })
    });
} 

Answer 2

First of all, if you want to set attribute (in your case the background color as inline style) you can use setAttribute method.

Secondly, the reason that you got empty value when you console loged Old color is that bg.style.background is looking for inline style attribute. If you want to use css external file you should use in your script getComputedStyle method.

SO:

item.addEventListener('click', event=> { 
  var bg = document.getElementById('tabDiv');
  var bgColor = bg.style.background; // this will work if you use inline-style
  var bgColor2 = bg.getPropertyValue('background'); // this will work if you use stylesheet
  console.log("Inline Color: "+bgColor + "Stylesheet Color: "+bgColor2);
  bgColor = 'linear-gradient(to bottom right, #ec7429, #843f1d)'; // this doesn't set any property to the element, it just assign a value to a variable.
bg.setAttribute('style', 'background:' + bgColor); // this will set inline style to the element with the color in the variable you declared above.
  console.log("New Color: "+bgColor);
})