Question

This is not working and I can’t figure out where I went wrong:

<style>
* {
margin: 0px
}  

div {
    height: 250px;
    width: 630px;
    overflow: hidden;
    vertical-align: top;
    position: relative;
}
  iframe {
    position: absolute;
    left: -50px;
    top: -130px;
  }
</style>
<script>
window.onload = function() {
   document.getElementsByTagName('body')[0].onkeyup = function(e) { 
      var div = document.getElementById('capture');
      if(e.keyCode == 70) {
         if(div.style.height == 250){
             alert("Yes");
         }
         else {alert("no");}
      }
   }
};
</script>

++++++++++++++EDIT+++++++++++++

Ok, well this works fine:

         if(div.style.height < '260px'){
             alert("Yes!");
             div.style.height = '475px';
             pan.style.top = '-25';
         }
         else if(div.style.height > '260px') {
            alert("no");
            div.style.height = '250px';
            pan.style.top = '-130';
         }

But this doesn’t:

     if(div.style.height = '250px'){
         alert("Yes!");
         div.style.height = '475px';
         pan.style.top = '-25';
     }
     else if(div.style.height = '475px') {
        alert("no");
        div.style.height = '250px';
        pan.style.top = '-130';
     }

What gives?!?

Answer 1

Use parseInt to convert the value to number:

var divHeight = parseInt(div.style.height, 10);
if(divHeight === 250) {
    alert("Yes!");
    div.style.height = "475px";
    pan.style.top = "-25px";
}
else if (divHeight === 475) {
    alert("no");
    div.style.height = "250px";
    pan.style.top = "-130px";
}