CODEWITHSUNDEEP
javascripthtmlcssreactjs
ChristophBTW
ChristophBTW

Reputation: 33

Changing div width with a button

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

Upvotes: 1

Views: 2348

Answers (4)

Grinnex.
Grinnex.

Reputation: 1049

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

// ...

Upvotes: 0

iBaset
iBaset

Reputation: 1

Are you sure you have declared the items with the id´s of links-side-nav-top, links-side-nav-bottom and side-nav?

You can try to console.log(linksSideNavTop); to check existence of id.

Upvotes: 0

xhxe
xhxe

Reputation: 1487

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

Upvotes: 1

gndgn
gndgn

Reputation: 21

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>

Upvotes: 1

Related Questions