How to include .js script in html file
Question
I have made the following html file, with an Openweather API and a link to my app.js file. But how can I include my JavaScript code in the html file? So I want to combine those two files into one. I cannot get this to work properly.
My html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body>
<div class="jumbotron">
<p>The weather outside is: </p>
<div class= "weather">
<input type="text" placeholder="Fill in your city first." id="city">
<button id="search">Submit</button>
<p id="demo"></p>
</div>
</div>
</body>
</html>
My app.js file:
$(document).ready(function(){
//input city
$('#search').click(function(){
var city = $('#city').val();
console.log(city);
//get weather using API and input
$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
$('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
});
});
});
3 answers
solution1
1 2015-12-12 10:12:32
copy and paste your app.js code inside <script> tag your can put it in header or just before </body> at bottom
<script>
/* your code*/
</script>
solution2
1 2015-12-12 10:29:01
In some case, some scripts work when we give script at bottom of html page just before closing body </body> tag:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="jumbotron">
<p>The weather outside is: </p>
<div class= "weather">
<input type="text" placeholder="Fill in your city first." id="city">
<button id="search">Submit</button>
<p id="demo"></p>
</div>
</div>
<script src="js/otherplugins.js"></script>
<script>
$(document).ready(function(){
//input city
$('#search').click(function(){
var city = $('#city').val();
console.log(city);
//get weather using API and input
$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
$('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
});
});
});
</script>
</body>
</html>
solution3
0 2015-12-12 10:12:53
Put your code into the script tag:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//input city
$('#search').click(function(){
var city = $('#city').val();
console.log(city);
//get weather using API and input
$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
$('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
});
});
});
</script>
</head>
<body>
<div class="jumbotron">
<p>The weather outside is: </p>
<div class= "weather">
<input type="text" placeholder="Fill in your city first." id="city">
<button id="search">Submit</button>
<p id="demo"></p>
</div>
</div>
</body>
</html>
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.
Related Question
How to include HTML in a js file?
how to include html file inside js file
include js file on html
how do I include a jQuery script into an include.js file?
Conditionally include JS script in html
how to convert an html script into a .js file script
how to include html and js code into one single js file?
Include php file with html via js include
Include HTML in JavaScript (.js) File
include an external JS file into HTML
Related Tags