Question

我制作了以下html文件，包含Openweather API和指向app.js文件的链接。但是如何在html文件中包含我的JavaScript代码？所以我想将这两个文件合二为一。我无法让它正常工作。

我的html文件：

    <!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>

我的app.js文件：

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

Answer 1

将您的app.js代码复制并粘贴到<script>标记内，您可以将其放入标题中，或者放在</body>底部

之前

    <script>
       /* your code*/
   </script>

Answer 2

在某些情况下，当我们在关闭body＆lt; / body＆gt;之前在html页面底部提供脚本时，某些脚本会起作用。标记：

<!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>

Answer 3

将您的代码放入脚本标记：

<!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>

如何在html文件中包含.js脚本

3 个答案: