I created a div in my html code. When the user clicks a button, I execute a simple JS script where I try to hide it:

  document.getElementById("samplques").style.display = "none";

When executed, I get the error

cannot read property style

I understand that the cause may be that the div has not loaded when the JS is executed. I tried putting the JS script at the bottom of the page, but that did not solve it.

Elsewhere on stackoverflow, people have suggested using jQuery. I am not skilled at jQuery, though I am using it occasionally.

Is using jQuery the answer? And if so, how would I acplish my goal? If not, how do I solve this?

==============================================

Code snippet is here:

<div id="samplques" style="display:block">
samplques starts here - want to hide this when clicked below<p>

heading here<p>

<form>
<input type=radio onclick="posts('here')">click here</a><br>
</form><p>

samplques ends here<p>
</div>



<script type="text/javascript">
function posts(selected) {
    document.getElementById(samplques).style.display = 'none';
}
</script>

=============================================

JS error onclick is:

Uncaught TypeError: Cannot read property 'style' of null

I created a div in my html code. When the user clicks a button, I execute a simple JS script where I try to hide it:

  document.getElementById("samplques").style.display = "none";

When executed, I get the error

cannot read property style

I understand that the cause may be that the div has not loaded when the JS is executed. I tried putting the JS script at the bottom of the page, but that did not solve it.

Elsewhere on stackoverflow, people have suggested using jQuery. I am not skilled at jQuery, though I am using it occasionally.

Is using jQuery the answer? And if so, how would I acplish my goal? If not, how do I solve this?

==============================================

Code snippet is here:

<div id="samplques" style="display:block">
samplques starts here - want to hide this when clicked below<p>

heading here<p>

<form>
<input type=radio onclick="posts('here')">click here</a><br>
</form><p>

samplques ends here<p>
</div>



<script type="text/javascript">
function posts(selected) {
    document.getElementById(samplques).style.display = 'none';
}
</script>

=============================================

JS error onclick is:

Uncaught TypeError: Cannot read property 'style' of null

• javascript
• jquery

• 1 no, using jQuery is not the answer. It will only make your code do nothing with no errors. You need to fix the real problem - document.getElementById returning null while you expect it to find a DOM element. – Igor Commented Jan 5, 2017 at 21:24
• because it does not find the element. So what is the code, what is the element you are trying to select? Either the element is not there when you try to read it or the id is not what you think it is or you have multiple elements with the same id. – epascarello Commented Jan 5, 2017 at 21:25
• 1 Without seeing your HTML, we can't say what the problem is. jQuery won't magically make <div id="samplques"> exist when it didn't before. – Paul Roub Commented Jan 5, 2017 at 21:26
• At a guess? Sample question. – Snowmonkey Commented Jan 5, 2017 at 21:33
• 1 document.getElementById(samplques).style.display = 'none' will only work if samplques is a variable defined somewhere else in your code (but not showing in the updated question). Changing to document.getElementById("samplques").style.display = 'none' should fix this. – Bryan Commented Jan 5, 2017 at 22:59

5 Answers 5

No. jQuery is just a library built on Javascript. Simply using jQuery can never just fix a problem, it can only make it easier (if anything).

If you're getting the error can't read property 'style' of null, it means document.getElementById("samplques") is returning null.

The cause is that an element with ID samplques doesn't exist.

So something like this? I did it with class names rather than id's, but is it possible you've misspelled the id? Edited to hide by ID, and show by class. Best of both worlds.

var hideIt = function(){
  // var hideMe = document.getElementsByClassName("hideShow")[0];
  var hideMe = document.getElementById("sampleques");
  hideMe.style.display = "none";
  }

var showIt = function(){
  var hideMe = document.getElementsByClassName("hideShow")[0];
  hideMe.style.display = "block";
}

<button onclick="hideIt()">Hide it!</button>
<button onClick="showIt()">Show it!</button>
<div class="hideShow" id="sampleques">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</div>

@Snowmonkey did a great job, but I would go a step further.

var bool = true;
var hideMe = document.getElementById('hideShow');
var btn = document.getElementById('btn');

function hideIt() {
  if (bool) {
    hideMe.style.display = "none";
    bool = !bool;
    btn.innerHTML = 'Show!';
  } else {
    hideMe.style.display = "block";
    bool = !bool;
    btn.innerHTML = 'Hide!';
  }
}

<button onclick="hideIt()" id='btn'>Hide!</button>
<div id="hideShow">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in
  ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis
  a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci
  luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</div>

It's hard to say without seeing your source, but you do not need jQuery. All that's needed is this:

<script>
function hideDiv() {
    document.getElementById("samplques").style.display = "none";
}
</script>

<button onclick="hideDiv()">CLICK ME</button>

<div id="samplques">CONTENT TO HIDE</div>

EDIT: that error you're getting is caused my a mismatch in your IDs that your targeting, or what your targeting is a class.

try this..Style display Property or try document.getElementById("samplques").style.display = 'none';