How to include external jQuery file in HTML?

Question

I have make a small example in JSFiddle. It is correct, but now I want to put the content of that example in files in localhost in my computer. But I am having problems with including the .js file. It does not load. Please could you help me? What is the problem?

Here is my JSFiddle example: Click here

Here is my index.html file in local host :

<!DOCTYPE html>
<!--This is the first html page of the website-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is a simple example">
<meta name="keywords" content="multiple, add, substract"> 
<title>Tirana</title>
<link rel="stylesheet" type="text/css"  href="style2.css">
<link rel="icon" href="images/logo.png" type="image/png" sizes="40x35">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>

<div class="container">
<textarea id="input" name="Input1" cols="40" rows="5" placeholder="enter your input here">
number a =5
number b =7
sum = a+b 
</textarea>
<input type="button" value="test" />
<textarea id="output" name="Output1" cols="40" rows="5" placeholder="output" readonly></textarea>
   </div>

</body>
</html>

And I have use this to include the .js file:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="codejs.js"></script>

Here is my codejs.js file:

$('input[type=button]').click(function () {
    var result= "";
    var lines = $('#input').val().split('\n');

    for (var i = 0; i < lines.length; i++) {
            result += lines[i];
            result += "\n";
    }

    $("#output").html(result);

});

Please could you help me? Thanks in advance

possible duplicate of [JQuery works in JS fiddle, but not on my website?](http://stackoverflow.com/questions/17417326/jquery-works-in-js-fiddle-but-not-on-my-website) — JJJ, Aug 01 '15 at 10:36

score 4 · Answer 1 · answered Aug 01 '15 at 10:37

What you are looking for is managing dependencies of js files. There are many possible options for that like using require library.

With respect to your code, the simplest way to address the problem is move your code in ready block.

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

score 1 · Answer 2 · answered Aug 01 '15 at 10:42

You can do what Nikhil is doing or you can do this.

You are Missing

$(function(){  // DOM IS NOW READY

    /* YOUR CODE HERE */

});

jQuery docs .ready()

Try it like this for your code.

$(function(){
$('input[type=button]').click(function () {
    var result= "";
    var lines = $('#input').val().split('\n');

    for (var i = 0; i < lines.length; i++) {
            result += lines[i];
            result += "\n";
    }

    $("#output").html(result);

});
});

How to include external jQuery file in HTML?

2 Answers2