Question

I’m a complete beginner when it comes to javascript and I am trying to create a simple if/else statement that will display a different divs.

<script>
   if (window.FileReader && Modernizr.draganddrop){
      alert("Your browser supports drag and drop!!");
      document.getElementById(no).style.display = 'none';
   }else{
      alert("Sorry, browser does not support drag and drop!");
      document.getElementById(yes).style.display = 'none';
   }
</script>

And then, in the body

<div id="yes">Drag and drop yes</div>

<div id="no">Drag and drop no</div>

Although the modernizr works just fine the script displays both divs

Any help will be greatfully received

Answer 1

The script runs before the elements exist. Use the load event so that the code runs after the page has loaded completely:

<script>
window.onload = function() {
   if (window.FileReader && Modernizr.draganddrop){
      alert("Your browser supports drag and drop!!");
      document.getElementById('no').style.display = 'none';
   }else{
      alert("Sorry, browser does not support drag and drop!");
      document.getElementById('yes').style.display = 'none';
   }
};
</script>

Also, as Evan spotted, you are using no and yes rather than the strings 'no' and 'yes'.