javascript - How to include .js script in html file

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 bine those two files into one. I cannot get this to work properly.

My html file:

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href=".css">
            <link rel="stylesheet" href="main.css">
            <script src=".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( ".5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
                $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
            });
        });
    });

My html file:

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="http://s3.amazonaws./codecademy-content/courses/ltp/css/bootstrap.css">
            <link rel="stylesheet" href="main.css">
            <script src="https://ajax.googleapis./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/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
                $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
            });
        });
    });

Share Improve this question asked Dec 12, 2015 at 10:08 Maris 912 gold badges2 silver badges10 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 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>

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./codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis./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/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
            $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
        });
    });
});
        </script>
    </body>
</html>

Put your code into the script tag:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://s3.amazonaws./codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis./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/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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to include .js script in html file - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)