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');
            });
        });
    });

ganesh satpute · Accepted Answer · 2015-12-12 10:12:32Z

1

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>

answered Dec 12, 2015 at 10:12

ganesh satpute

3912 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yjs · Accepted Answer · 2015-12-12 10:29:01Z

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>

For better optimization, adding code and other plugins at bottom of file is recommended.

Pedram · Accepted Answer · 2015-12-12 10:28:17Z

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>

Collectives™ on Stack Overflow

How to include .js script in html file

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related