Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

90
Vistas
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;
}
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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>

about 4 years ago · Juan Pablo Isaza Denunciar

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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

// ...
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda