Solution 1 :

Note Two Problems:

  1. Ensure that the element you want to change it’s display has the id="klik"

  2. The below code will execute only once.

    if (screen.width > 900) { document.getElementById('klik').style.display = 'none'; }

    • But why?
      The answer is because you didn’t set an event to run it every time when your resize the screen. Also, screen.width will always return the width of the display. What you are looking for is the window.innerWidth

So a possible solution:

    window.addEventListener('resize', function(){
      document.getElementById("screen").innerHTML = window.innerWidth.toString() + "px";
      if(window.innerWidth < 900)
        //Perform your desired Executions Here
<div id="screen"></div>

This will run the code every time a window.onresize is triggered. And that’s exactly what @media in CSS does. It works on window.onresize behind the scene in javascript sense.

Note: I have added a simple illustration on how to work with screen.resize which you can use as the basis for modifying element properties based on a certain range. All you need to do, is to ensure that you do your styling within that block and it will work.

Solution 2 :

Hmmm, actually this is exactly what media queries are made for. Did you try

@media (min-width: 900px) {
  #klik {
    display:  none;

If that doesn’t work: Are there any other css styles that may overwrite that particular style? Something like #klik { display: block !important; } …?

Problem :

So, I’ve got a button that display toggles a div on a click event. It works properly. However, I can’t hide the same div using nearly the same code (however, I want to toggle this div after my screen becomes too big, not after clicking), because I get the problem like in the title- ‘cannot read property style of null’

The part that doesn’t work (hiding a div after screen becomes too big:

if (screen.width > 900) {
  document.getElementById('klik').style.display = 'none';

And the part that works (button toggles a div using a click event):

function showDiv() {
  if (document.getElementById('klik').style.display == 'block'){
    document.getElementById('klik').style.display = 'none';
    document.getElementById('klik').style.display = 'block';

I wrote this code because I want to do a scalable menu, displaying a div with list items inside after clicking on it. The menu button is visible only when screen-width <= 900px, if screen-width > 900px I’ve got a normal navigation bar and the button disappears.

Am I forgetting something? I’m new to Javascript. Also one more thing- it also doesn’t work using @media rule, however I can change the background-color with @media. I hope it might help. Also thanks in advance.


Comment posted by clota974

Is the “display” property explicitly set on your element? Otherwise, it will return an empty string

Comment posted by Phix

How are these scripts included on the page?

Comment posted by mitkosoft

are you sure your DOM is fully loaded when asking to hide something into? try

Comment posted by displacedtexan

cannot read property style of null

Comment posted by Mosia Thabo

@displacedtexan correct. That’s the first problem. And still that code wouldn’t work because he’s not running it every time a window is resized – at least judging by what he has provided.

Comment posted by neoxxx

Sadly doesn’t work either. Also it doesn’t execute even once as u mentioned earlier.

Comment posted by Mosia Thabo

It’s not supposed to execute once. I think you’re not doing it right… It must run everytime when you resize because it has to check the width and then do styling…

Comment posted by Mosia Thabo

Share your HTMl please because it’s gonna take time creating HTML again to demonstrate for you.

Comment posted by Mosia Thabo

Mark as the answer if you’re fine then. Next time when you ask you should include HTML so that it’s easier to diagnose.

Comment posted by Floyd

Well, then some other styles may get in your way .. to find out what is happening, add media query again, expand viewport to > 900 pixels and check styles for #klik in browsers developer tools. If your media query style is applied, but overwritten by some other style, you will see your style struck through