I am currently utilizing Bootstrap in Bootstrap Studio along with plain JavaScript. One of the challenges I am facing pertains to changing the background color of a <div> element upon selecting a new tab.
The objective is to dynamically alter the background colors of tabs and their associated content. For instance, when switching between tab 1 and tab 2, tab 1 should display a blue background while tab 2 should showcase an orange background. The color change should occur seamlessly as tabs are switched. I have defined the base color by adjusting the parent <div> background. (The reason for not explicitly coloring the tab content and active tab is due to the limited size of the colored area).
Below is the current JavaScript function that I have implemented.
window.addEventListener('load', startup);
async function startup(){
// other functions
await toggleColor();
}
async function toggleColor(){
var menuItem = 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);
})
});
}
Below is the CSS styling for both the parent <div id='tabDiv'> and 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);
}
Outlined below is the general HTML structure of my project.
<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' data-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>
Upon running the code in its current state, the console output is as follows:
Old Color:
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
Old Color:
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
Consequently, I transferred the initial CSS styling to the HTML
<div id='tabDiv' style="background: linear-gradient(144deg, #8c3a83, #682b61);">When executing the code with the styling defined in the HTML rather than the CSS files, the following results were obtained:
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)
Various attempts were made to modify the formatting and color type (hex or RGB) within the HTML style declaration and the JS function when setting the new color. However, the issue persists with the old color not updating or changing during the JS function. The addition of !important to the new color in JS was also attempted.
There is speculation that the problem may stem from the rendering order. Given my limited experience with Bootstrap Studio, I've sought advice here. I am aware that file order can be adjusted by managing file-type order, but is there a method to alter the CSS vs. JS order? Though I'm uncertain if this is the root cause as another function in my project successfully updates the style.display from 'none' to 'block'.
Similar queries on StackOverflow revolve around correctly retrieving the element and wrapping the function in a window.onload. From what I can discern, both actions have been appropriately implemented in my project. A
window.addEventListener('load', function);<div id='tabDiv'> that I aim to adjust the property of. Experimentation was also conducted with no default color, and the addition of new colors within the JS function.
Could the issue be tied to the code or logical structure? Any guidance would be highly valued. Thank you for taking the time to review this extensive query.
tl;dr: Seeking to modify the styling of an HTML element using a JS function, however, the color fails to update. Despite sounding like a fundamental issue, an effective resolution has not yet been uncovered.