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
2 answers
solution1
4 2015-08-01 10:37:13
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
});
solution2
1 2015-08-01 10:42:22
You can do what Nikhil is doing or you can do this.
You are Missing
$(function(){ // DOM IS NOW READY
/* YOUR CODE HERE */
});
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);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.