how to hide an html div by id using javascript

Question

I am trying to hide an HTML div with Javascript and am getting an error

JavaScript runtime error: Unable to get property 'style' of undefined or null reference

Here is my JavaScript code:

if (typeof(jsondata[0]) == 'undefined') {
    alert('should be hidden');
    document.getElementById("unassignedDevices").style.visibility = "hidden";
}

and here is my HTML:

<div id="unassignedDevices">
    <button id="unassignedDevicesbutton" class="button-basicmenu" onclick="findUnassignedDevices();">Find unassigned Devices</button>

    <table id="gridunassignedDevices"></table>

</div>

So when I start debugging, the page alerts 'should be hidden' and then I get the JavaScript runtime error.

How can I hide this div?

Answer 1

$(document).ready(function(){
   if (typeof (jsondata[0]) == 'undefined') {
      $('#unassignedDevices').hide();
    }
});

Answer 2

Javascript is faster than jQuery a little bit, but why cant you used jQuery instead of pure javascript alone ?

hir is sample code for the hide option. sample 1:

 $(document).ready(function(){
         $('#id').hide();
     });

sample 2:

$(function(){
   var index = {
      init: function(){
        //all jQuery calls
        $(document).on('click', '#id', this.exe_this_func);
      },
      exe_this_func: function(e){
          $(this).hide();
          e.preventDefault();
      }
   }
   index.init();
})();