i am trying to learn JS, React and Node.js. Now i am trying to change the width of a div with a button but i'm getting always the same error, that it "Cannot read property 'style' of null
Here is my JS
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";
};
}
Here the CSS
#side-nav {
position: fixed;
background-color: #454545;
height: 100%;
width: 70px;
}
Have a look at this working example:
function changeWidth() {
document.getElementById('myContainer').style.width = '500px'
}
#myContainer {
width: 250px;
height: 50px;
background: #aaa;
}
<div id="myContainer"></div>
<button onclick="changeWidth()">Change width</button>
Above answers Are correct, also I can show my example how to do that by .classList.toggle()
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 has toggle your div width increases and and in Javascript .toggle method removes and adds your passed classList which is "toggle" in our case
The error "Cannot read property 'style' of null" means that the code to get the element (document.getElementById()) isn't retrieving (founding) an element with that particular ID.
I would suggest for you to double check that you don't have duplicated ID with the same exact name and also to move the document.getElementById() 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 {
// ...
};
}
Also a good alternative to document.getElementById() would be document.querySelector():
document.querySelector("h1"); // Search html tag "h1"
document.querySelector(".rect"); // Search class name "rect"
document.querySelector("#square"); // Searcd id name "square"
For last, to know if you are really founding and retrieving the intended element you can for example console.log() the var element:
var sideNav = document.getElementById("side-nav");
console.log(sideNav);
// ...