javascript - Hide element based on value of other elements -

i trying hide table based on value of 2 fields, if field2 equal field1 table hidden.

jsfiddle

html:

<form>     expected number of items: <input type="text" value="14" name="totalitems" id="totalitems">     <p>     number of items entered: <input type="text" value="14" name="entereditems" id="entereditems"> </form>  <p> <table border="1" style="width:100%" id="hidethis">   <tr>     <td>this should hidden when "totalitems" equals "entereditems"</td>   </tr> </table> 

js:

function toggleclass(eid, myclass){     var theele = document.getelementbyid(eid);     var eclass = theele.classname;      if(eclass.indexof(myclass) >= 0){         theele.classname = eclass.replace(myclass, "");     }else{         theele.classname  += "" +myclass;     } } 

$(document).ready( function() {     $('#totalitems, #entereditems').keyup(function(){         if( $('#totalitems').val() == $('#entereditems').val() ){             $('#hidethis').hide();         }else{             $('#hidethis').show();         }     });     }); 

if need check @ page load:

function checkfields(){     if( $('#totalitems').val() == $('#entereditems').val() ){         $('#hidethis').hide();     }else{         $('#hidethis').show();     } }  $(document).ready( function() {     $('#totalitems, #entereditems').keyup(function(){         checkfields();     });        checkfields(); }); 

plain javascript implementation:

function checkfields(){     if(  document.getelementbyid('totalitems').value == document.getelementbyid('entereditems').value ){         document.getelementbyid('hidethis').style.display = 'none';     }else{         document.getelementbyid('hidethis').style.display = 'inline-block';     } }  document.getelementbyid('totalitems').addeventlistener('keyup', function (){    checkfields(); }, false);  document.getelementbyid('entereditems').addeventlistener('keyup', function (){    checkfields(); }, false);  checkfields();