C.Hopewell C.Hopewell - 10 days ago 4
HTML Question

Code works in JSFiddle but not in Web Browser or Dreamweaver

This code works in JSFiddle fine however when I put in in a dreamweaver document or try it in a browser the div never shows. The aim is to get the div 'sreturned' to show when the user selects value '1' from the drop down. I have the code in two seperate files and link them. Any help greatly appreciated.

Here is the HTML

<body>
<script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
<select id = "typeoption">
<option value="0">Qualifying Bet</option>
<option value="1">Free Bet</option>
<option value="2">Risk Free Bet</option>
</select>
<div style='display:none;' id='sreturned'> Stake Returned
</div>
</body>


Here is the script

$(document).ready(function(){
$('#typeoption').on('change', function() {
if ( this.value == '1')
{
$("#sreturned").show();
}
else
{
$("#sreturned").hide();
}
});
});

Answer

EDIT: JSFiddle include jquery in all pages

Do you have add jquery script ? Try this file :

<body>
 <script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
 <select id = "typeoption">
 <option value="0">Qualifying Bet</option>
 <option value="1">Free Bet</option>
 <option value="2">Risk Free Bet</option>
 </select>
 <div style='display:none;' id='sreturned'> Stake Returned
 </div>
</body>


<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
 $(document).ready(function(){
     $('#typeoption').on('change', function() {
         if ( this.value == '1')
       {
         $("#sreturned").show();
       }
       else
       {
          $("#sreturned").hide();
        }
     });
 });
</script>
Comments