Jsfiddle Code Not Working in My Own Page

JSFiddle code not working in my own page

"If I take the code and put in the HTML/JS (linked in head)"

The problem is that you've put your code in the <head>, so it runs before the input elements have been parsed and so then $('input[type="range"]') finds no elements.

If you look at the "Frameworks & Extensions" options in JSFiddle, you'll notice that it puts your JS code in an onload handler by default, so your code doesn't run until the whole page has loaded. For the code to behave the same way on your own web page you'd need to wrap it in an onload handler of your own, or - since you're using jQuery - wrap it in a document ready handler:

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

Or the short form is like this:

$(function() {
    // your code here
});

Or include your script at the end of the page, so that it runs after the elements it tries to manipulate have been parsed.

JSFiddle code not working in Chrome

I want to add this as an answer because the comments section simply cannot handle the content im trying to get across.

JS Fiddle does not normally generate references when you run code in the editor.

Try adding the following to your HTML/PHP or whatever file type you are using for markup.

<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
</head>

It sounds like you havent included the necessary references to both JQuery and JQuery UI.

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.

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.

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.

Fiddle script not working on website

You declare custom script plus add jquery, but they must be separate:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

+ note jquery src url

EDIT:
this code works fine in my chrome

<html>
I am a </span><select name="parent_selection" id="parent_selection">
        <option value="">-- Please Select --</option>
        <option value="patient">Patient</option>
        <option value="doctor">Doctor or physician</option>
        <option value="school">School or parent</option>
        <option value="worker">Case worker</option>
    </select>
    <br /><span>and I need information on</span>
    <select name="child_selection" id="child_selection" onchange="location = this.options[this.selectedIndex].value;">
    </select>
</html>




<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

var jq81 = jQuery.noConflict();
jq81(document).ready(function($){
//let's create arrays
var patient = [
    {display: "My initial visit", value: "patients#visit" },
    {display: "My initial evaluation", value: "patients#visit" },
    {display: "My appointments", value: "patients#appointments" },
    {display: "Your payment policies", value: "patients#policies" }];

var doctor = [
    {display: "Our approach", value: "doctors-and-physicians" },
    {display: "Our services", value: "services" },
    {display: "Referring patients", value: "patients#visit" }];

var school = [
    {display: "Our approach", value: "schools-and-parents" },
    {display: "My child's initial evaluation", value: "patients#visit" },
    {display: "Setting appointments", value: "patients#appointments" },
    {display: "Your payment policies", value: "patients#policies" }];

var worker = [
    {display: "Our approach", value: "case-workers" },
    {display: "Insurance policies", value: "clients#insurance" },
    {display: "Your Payment policies", value: "patients#policies" }];

//If parent option is changed
jq81("#parent_selection").change(function() {
    var parent = jq81(this).val(); //get option value from parent

    switch(parent){ //using switch compare selected option and populate child
          case 'patient':
            list(patient);
            break;
          case 'doctor':
            list(doctor);
            break;             
          case 'school':
            list(school);
            break; 
        case 'worker':
            list(worker);
            break;
        default: //default child option is blank
            jq81("#child_selection").html('');  
            break;
       }
});

//function to populate child select box
function list(array_list)
{
    jq81("#child_selection").html(""); //reset child options
    jq81(array_list).each(function (i) { //populate child options
    jq81("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
    });
}

});

</script>

JSFiddle doesn't work even if I copy code from another working fiddle

Since you said you're new to JavaScript, here is a little more detailed answer.

If your JavaScript isn't behaving the way you expect it to, definitely check your browser console. You can do that in Chrome by going to View>>Developer>>JavaScript Console or simply pressing Command+Alt+J. In other browsers you will find similar developer tools.

In the case of your JS Fiddle, when you open the console you see an error that says $ is not defined. $ is shorthand for jQuery. The JavaScript code that you've copied from the other Fiddle uses jQuery to do DOM Manipulation and your Fiddle hasn't loaded jQuery. So click on the gear icon in your JS section and under Frameworks select jQuery (I recommend 2.2.1) and try running your code again.

Jsfiddle Code Not Working in My Own Page