JavaScript

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

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

Bootstrap Studio – The style property of my “ element is not changing during my JS function

Advertisement

Answer