JavaScript Code Works in Jsfiddle and But Not in the Browser

Javascript Code works in jsfiddle and but not in the Browser

The usual reason for this is that you're putting your code above the elements that it operates on, and not delaying the code using onload or "ready" events. jsFiddle's default is to put your JavaScript in an onload handler, which delays it until very late in the page load process.

Fundamentally, before your code can do something with an element on the page, the element has to exist. For it to exist, the browser must have processed the HTML for it. So this fails:

<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>

but this works:

<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>

Do I need an onpage load event?

Almost certainly not.

Does the javascript need to be put in a function?

Not necessarily. What you do is put the script tag at the very end of the HTML, just before the closing </body> tag.

Javascript code works in JSFiddle but does not work in browser

Sorry for adding another answer, it is formatted beter here. Made it work for me.I just removed the two meta tags at the beginning of your head tag. Also added defer attribute to included script.

function downloadPDF() {
  domtoimage.toPng(document.getElementById('invoice')).then(function(blob) {
    var pdf = new jsPDF('l', 'pt', [$('#invoice').width(), $('#invoice').height()]);
    pdf.addImage(blob, 'PNG', 0, 0, $('#invoice').width(), $('#invoice').height());
    pdf.save("test.pdf");
    that.options.api.optionsChanged();
  });
}

document.querySelector('#download-button').addEventListener('click', downloadPDF);

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
</head>

<body>
  <span>None</span>
  <div id="invoice">
    <span> Invoice Info </span>
    <span> 2020-07-20 </span>
    <span> $$$  </span>
  </div>
  <button class="btn btn-info" id="download-button">Download PDF</button>
  <script defer type="text/javascript" src="index.js"></script>
</body>

</html>

Code working in jsFiddle but not in browser

You chose to run the script-code "onload" on jsFiddle, that's the difference.

Without onload it will not find $('area') , because your script is placed inside the <head>, where the elements inside the <body> are still unknown.

Code works in JSFiddle but not in Web Browser or Dreamweaver

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>

code work on jsfiddle but not on my website?

I can't see you've included your JQuery library.

Put this somewhere in your code (e.g at the bottom, above your <script> tags)

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Or you can download the whole library locally to your computer and refer to it that way instead.

JavaScript Code Works in Jsfiddle and But Not in the Browser