Just starting out with JavaScript - updating the appearance of an element

Question

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads.

var someVar = true;

function show_ifTrue() {
    if (Boolean(someVar) == true) {
        document.getElementById('x').style.display = 'block'; 
        console.log("I CHANGED IT");
    }
    else {
      document.getElementById('x').style.background = 'red';
    }
}

.sidebar {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    float: left;
    display: inline-block;
    z-index: 50;
}
#tab {
    display: block;
}
#x {
    display: none;
}

<div class="sidebar">
    <a href="#" id="tab"> Cats </a>
    <a href="#" id="x" onpageshow="show_ifTrue();"> Dogs</a>
</div>

I have exhausted various methods like adjusting the CSS for .sidebar a{...} and assigning individual display properties to each tab, using !important, modifying in JS via style.cssText or setting attribute, yet still struggling to update the display as desired.

javascript html css

Answer 1

Answer №1

To modify the color, the function must be called first. However, it seems that the function is not being called because onpageshow can only be added to the <body> element. You could move it there like this: <body onpageshow='...'>. Alternatively, if you prefer to work with just the div itself, you can use onload:

window.onload=function(){
    show_ifTrue();
}

You can also achieve this using onpageshow as follows:

window.onpageshow=function(){
    show_ifTrue();
}

Additionally, you don't need the Boolean prefix in your function, simply use someVar == true.

Answer 2

To modify the color, the function must be called first. However, it seems that the function is not being called because onpageshow can only be added to the <body> element. You could move it there like this: <body onpageshow='...'>. Alternatively, if you prefer to work with just the div itself, you can use onload:

window.onload=function(){
    show_ifTrue();
}

You can also achieve this using onpageshow as follows:

window.onpageshow=function(){
    show_ifTrue();
}

Additionally, you don't need the Boolean prefix in your function, simply use someVar == true.

Answer 3

Answer №2

It seems like there was a missing closing bracket in the CSS for #tab (UPDATE: The OP has made changes to address this, but there may have been other issues as well). Additionally, using window.onload or onpageshow on the body element is recommended — it's the only element that will respond correctly. Once these adjustments are made, here's an example of a functioning code:

window.onload = function () {
    show_ifTrue();
}

var someVar = true;

function show_ifTrue() {
    if (someVar === true) {
        document.getElementById('x').style.display = 'block'; 
        console.log('CHANGE HAS BEEN MADE');
    }
    else {
        document.getElementById('x').style.background = 'red';
    }
}

.sidebar {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    float: left;
    display: inline-block;
    z-index: 50;
 }

#tab {
    display: block;
}

#x {
    display: none;
}

<div class="sidebar">
    <a href="#" id="tab"> Cats </a>
    <a href="#" id="x"> Dogs</a>
</div>

I trust this information proves useful!

Answer 4

It seems like there was a missing closing bracket in the CSS for #tab (UPDATE: The OP has made changes to address this, but there may have been other issues as well). Additionally, using window.onload or onpageshow on the body element is recommended — it's the only element that will respond correctly. Once these adjustments are made, here's an example of a functioning code:

window.onload = function () {
    show_ifTrue();
}

var someVar = true;

function show_ifTrue() {
    if (someVar === true) {
        document.getElementById('x').style.display = 'block'; 
        console.log('CHANGE HAS BEEN MADE');
    }
    else {
        document.getElementById('x').style.background = 'red';
    }
}

.sidebar {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    float: left;
    display: inline-block;
    z-index: 50;
 }

#tab {
    display: block;
}

#x {
    display: none;
}

<div class="sidebar">
    <a href="#" id="tab"> Cats </a>
    <a href="#" id="x"> Dogs</a>
</div>

I trust this information proves useful!

Just starting out with JavaScript - updating the appearance of an element

Answer №1

Answer №2

Similar questions

Deleting a button from a list item or array in Angular 12

Updating the state of a React component through a button click using React-JS

Leverage the power of the React useFetch hook with an onclick/event

Arranging an Array by Two Distinct Characteristics

Creating an Active Link in Bootstrap 5.0 (Beta 3) Navbar Using JavaScript

Creating stunning 3D animations using Canvas

Using CSS with multiple background images and the "contain" property

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Is there a way to rotate the custom marker icon in vue2-google-map?

Constantly showing false values in AngularJS Firebase array objects

In JavaScript, you can ensure that only either :after or :before is executed, but not both

gulp-minify-css-names not altering any files during processing

Updating text color in JavaFX for a textarea

Ensure that all Woocommerce products have consistent height while allowing for variations in width

How can you position the nav collapse toggle to the far right while still allowing it to collapse downwards on smaller devices with Bootstrap 5?

What is the best way to ensure a consistent spacing between two flex items?

"Resolving the duplication issue of a textbox in Phonegap app

Adding array elements to a JavaScript object

React and Express failing to display content

Learn how to retrieve the current input value from a repeating form using Jquery