Jquery Script Works in Jsfiddle But Not on HTML Page

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 works in jsfiddle but not in html document

You want to put your code inside either

$(document).ready(function() {
    // Your code here
});

window.onload = function() {
    // Your code here
};

All of the elements need to be loaded first before the javascript executes. With jsFiddle you don't have to do this, but this is probably what's causing it not to work outside of jsFiddle.

Code is working in jsfiddle but not in html file

Small correction with linking external js file. Change

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>

<script>

<!doctype html><html>
<head>  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>  <script>    var editElem = document.getElementById("editor1");    $(document).ready(function() {      $("#savebtn").click(function() {        var title = prompt("What would you like your title to be?");        localStorage.setItem(title, editElem.value);        titles = localStorage.getItem("titles");
        if (titles == null) {          titles = [];        } else {          titles = JSON.parse(titles);        }        titles.push(title);        localStorage.setItem("titles", JSON.stringify(titles));        document.getElementById("update").innerHTML = "Edits saved!";        var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>";        $("#Contentable").append(htmlData);        var userVersion = editElem.value;        localStorage.setItem("userEdits", userVersion);        editElem.value = "";      });    });
    function showData(txt) {      editElem.value = localStorage.getItem(txt);    }  </script></head>
<body>  <input type='text' id="editor1" />  <input type='button' id="savebtn" value="save" />  <div id="Contentable"></div>  <br>  <br>  <br>  <br>  <br>  <div id="update"></div></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.

Jquery script works in JSfiddle but not on html page

The problem might be, in jsfiddle the script was executed on dom ready (fiddle not working outside the dom ready handler).... but in your page it doesn't look like that

In jsfiddle the second dropdown in the LHS panel selects the place where the script will be added, by default it is added as a window.onload handler.

So move the invocation of icon_hover to a dom ready handler

jQuery(function(){
    icon_hover();
})

Demo: Fiddle

JavaScript works in JSFiddle but not in html file on a browser

You must place your code inside

$(document).ready(function(){
    ...
});

Since your script comes before your checkbox is rendered.

EDIT

You might run unto a problem with my first answer. Thanks to Omar's comment and reference

It should be this way rather than .ready() function:

$(document).on('pageinit') { 
    ...
});

JQuery works in JS fiddle, but not on my website?

Your jsFiddle is set for onload in the upper left of the jsFiddle window. If you set it to "No Wrap - in Head" which simulates code in the <head> tag, then your jsFiddle no longer works.

The onload setting means that jsFiddle doesn't run your javascript until the page has been loaded.

In your real page, you are probably running the javascript too soon before the page has been loaded.

You can either fix that by putting your javascript in it's own .ready() function:

$(document).ready(function(){
    $(".image").css("border","3px solid red");
});

Or, you can make sure the javascript isn't loaded/run until right before the </body> tag which is a simple way to make sure the content of your page is loaded before the script runs.

<body>
Your HTML content here

<script>
// your script here that runs after all of the DOM is parsed
$(".image").css("border","3px solid red");
</script>

</body>

See this answer for more details on placing the <script> tag appropriately.

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.