Adjusting the width of a div element using a button

Question

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read property 'style' of null."

Let me share with you my JS code:

var sideNav = document.getElementById("side-nav");
var linksSideNavTop = document.getElementById("links-side-nav-top");
var linksSideNavBottom = document.getElementById("links-side-nav-bottom");

function openMenuTablet() {
    if (sideNav.style.width === '70px') {
        sideNav.style.width = '300px';
        linksSideNavTop.style.display = "block";
        linksSideNavBottom.style.display = "block";
    } else {
        sideNav.style.width = '70px';
        linksSideNavTop.style.display = "none";
        linksSideNavBottom.style.display = "none";
    };
}

And here is the corresponding CSS for styling:

#side-nav {
    position: fixed;
    background-color: #454545;
    height: 100%;
    width: 70px;
}

javascript html css reactjs

Answer 1

Answer №1

Check out this live demonstration:

function adjustSize() {
  document.getElementById('myElement').style.width = '500px'
}

#myElement {
  width: 250px; 
  height: 50px; 
  background: #aaa;
}

<div id="myElement"></div>
<button onclick="adjustSize()">Adjust size</button>

Answer 2

Check out this live demonstration:

function adjustSize() {
  document.getElementById('myElement').style.width = '500px'
}

#myElement {
  width: 250px; 
  height: 50px; 
  background: #aaa;
}

<div id="myElement"></div>
<button onclick="adjustSize()">Adjust size</button>

Answer 3

Answer №2

Indeed, the previous answers are accurate. I can also provide a demonstration using the .classList.toggle() method.

const box = document.querySelector(".box")
const button = document.querySelector("button")

button.addEventListener("click", () => {
  box.classList.toggle("toggle")
})

.box{
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
  transition: 0.5s
}

.box.toggle{
  width: 200px;
}

<div class="box"></div>
<button>Toggle Class List</button>

If your class list includes toggle, the width of your div will increase. In JavaScript, the .toggle method both removes and adds the specified classList (in this case, "toggle").

Answer 4

Indeed, the previous answers are accurate. I can also provide a demonstration using the .classList.toggle() method.

const box = document.querySelector(".box")
const button = document.querySelector("button")

button.addEventListener("click", () => {
  box.classList.toggle("toggle")
})

.box{
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
  transition: 0.5s
}

.box.toggle{
  width: 200px;
}

<div class="box"></div>
<button>Toggle Class List</button>

If your class list includes toggle, the width of your div will increase. In JavaScript, the .toggle method both removes and adds the specified classList (in this case, "toggle").

Answer 5

Answer №3

Have you made sure to declare the elements with the identifiers links-side-nav-top, links-side-nav-bottom, and side-nav?

You may want to verify the existence of these ids by using console.log(linksSideNavTop);.

Answer 6

Have you made sure to declare the elements with the identifiers links-side-nav-top, links-side-nav-bottom, and side-nav?

You may want to verify the existence of these ids by using console.log(linksSideNavTop);.

Answer 7

Answer №4

The error "Cannot read property 'style' of null" occurs when the code attempts to access the style property of an element that does not exist in the document (i.e., document.getElementById() is unable to find an element with the specified ID).

To resolve this issue, make sure there are no duplicate IDs with the same name and ensure that the document.getElementById() function is placed inside your function.

function openMenuTablet() {
    var sideNav = document.getElementById("side-nav");
    var linksSideNavTop = document.getElementById("links-side-nav-top");
    var linksSideNavBottom = document.getElementById("links-side-nav-bottom");

    if (sideNav.style.width === '70px') {
        // ...
    } else {
        // ...
    };
}

An alternative to document.getElementById() is document.querySelector():

document.querySelector("h1");         // Search html tag "h1"
document.querySelector(".rect");      // Search class name "rect"
document.querySelector("#square");    // Searcd id name "square"

To confirm if you have successfully retrieved the desired element, you can use console.log() to log the variable:

var sideNav = document.getElementById("side-nav");
console.log(sideNav);

// ...

Answer 8

The error "Cannot read property 'style' of null" occurs when the code attempts to access the style property of an element that does not exist in the document (i.e., document.getElementById() is unable to find an element with the specified ID).

To resolve this issue, make sure there are no duplicate IDs with the same name and ensure that the document.getElementById() function is placed inside your function.

function openMenuTablet() {
    var sideNav = document.getElementById("side-nav");
    var linksSideNavTop = document.getElementById("links-side-nav-top");
    var linksSideNavBottom = document.getElementById("links-side-nav-bottom");

    if (sideNav.style.width === '70px') {
        // ...
    } else {
        // ...
    };
}

An alternative to document.getElementById() is document.querySelector():

document.querySelector("h1");         // Search html tag "h1"
document.querySelector(".rect");      // Search class name "rect"
document.querySelector("#square");    // Searcd id name "square"

To confirm if you have successfully retrieved the desired element, you can use console.log() to log the variable:

var sideNav = document.getElementById("side-nav");
console.log(sideNav);

// ...

Adjusting the width of a div element using a button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Keep moving forward in Sailsjs even after sending back a response with res.json();

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

What is the process for including a new item in a JavaScript dictionary?

Why Am I Still Getting a 431 (Request Header Fields Too Large) Error in My React App Despite Clearing

Enhance your export capabilities with Material-UI theme integration for helper functions

Determine the absolute path with respect to a different reference path, rather than the current working directory

Load information into a different entity

Tips for implementing horizontal scroll in Material UI grid

Error message: "Angular.js encountered a typeError stating that V2.example is not a function"

Find and make adjustments to the primary HTML document in your Magento online shop

What is the best way to convert API data into a currency format?

When AJAX is invoked, the HTML content fails to display within a div

When I attempted to run `npm start`, an error with status code 1 was thrown,

Tips for removing the Y-Axis entirely from a CanavasJS chart

Vue 3 Router view fails to capture child's event

Is it possible to retrieve a constant value while developing a customized rule in typescript-eslint?

Display the map using the fancybox feature

Obtain a string in JSON format upon clicking in Angular 2

The menu is failing to open the intended div index

Bug in canvas rendering for Chrome versions 94 and 95