Javascript 在html中使用if/else语句_Javascript_Html_If Statement

Javascript 在html中使用if/else语句

javascript html if-statement

Javascript 在html中使用if/else语句,javascript,html,if-statement,Javascript,Html,If Statement,我是个网站新手，有人能帮我吗？我想使用html中的if/else语句在我的网站上显示文本和一些电影。下面我添加了html代码，但它将if/else语句视为文本而不是代码。如何使用我的js代码和OpenWeatherAPI的温度输出，使这个if/else语句工作 <!DOCTYPE html> <html> <head> <link rel="stylesheet" h

我是个网站新手，有人能帮我吗？我想使用html中的if/else语句在我的网站上显示文本和一些电影。下面我添加了html代码，但它将if/else语句视为文本而不是代码。如何使用我的js代码和OpenWeatherAPI的温度输出，使这个if/else语句工作

       <!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>
                <input type="text" value="In which city are you?" id="city">
                    <button id="search">Submit</button>
                    <p id="demo"></p>

                    <p>The weather outside is: </p>

                    <div class= "weather">
                        Fill in your location first
                    </div>

                    <p>What will you be making for dinner tonight?</p> 
                    <div class="inspiration">
                        Give me some inspiration!

                        <div class="recipe">        
    if (Math.round(data.main.temp) == null) {
        <p>Fill in your location first</p>
    } else {
        if (Math.round(data.main.temp) < -5) {
            <p> Oh man.. It is way too cold! Stay inside the whole day and have a nice and hot turkey soup. Make sure you don’t freeze </p>
            <iframe width="392" height="220" src="https://www.youtube.com/embed/SdJfxGo5PQM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === -5 - 5){
            <p>wow look at that weather, it is quite cold.. With those temperatures a chicken and fries curry would be nice don’t you think? </p>
            <iframe width="392" height="220" src="https://www.youtube.com/embed/PfoOxeTXdXA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === 5 - 15) {
            <p> Today is a good day, don’t you think? Some cheeseburger cups would taste great!</p>
            <iframe width="392" height="220" src="https://www.youtube.com/embed/k-2KdH6k0nA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === 15 - 25) {
            <p> With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!</p>
            <iframe width="4392" height="220" src="https://www.youtube.com/embed/XN4aSh-Dj4Y?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === 25-35) {
            <p> Damn it's hot! I can hardly think of anything to have for dinner to cool down. </p>
            <p> Just go get some ice cream please. </p>

        } else {
            <p>Those temperatures are insane! Are you in a sauna?</p>
        }
    }
                        </div>
                    </div>
                </div>
            </body>
            </html>

JavaScript代码需要在

标记中定义，否则它将无法工作

只需将此代码放在jQuery代码下面的同一个函数中。创建一个空的

标记，用任何ID代替

和

，然后用jQuery填充它们。然后根据您的情况更改其

innerHTML

（使用jQuery函数

html（）

）。例如：

$(document).ready(function()
{
    $('#search').click(function()
    {
        var city = $('#city').val();
        console.log(city);
        $.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');
        });
    });

    if (Math.round(data.main.temp) < -5)
    {
        $("#YOU_CHOSEN_ID").html("<p> Oh man.. It is way too cold! Stay inside the whole day and have a nice and hot turkey soup. Make sure you don’t freeze </p>
        <iframe width='392' height='220' src='https://www.youtube.com/embed/SdJfxGo5PQM?rel=0&amp;showinfo=0' frameborder='0' allowfullscreen></iframe>")
    }
});

$（文档）.ready（函数（）
{
$（“#搜索”）。单击（函数（）
{
var city=$（'#city'）.val（）；
控制台.日志（城市）；
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?q=“+city+”&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0”，函数（数据）
{
$（'.weather'）.html（Math.round（data.main.temp）+'degrees Celcius'）；
});
});
if（数学四舍五入（数据主温度）<-5）
{
$（“#你选择了#ID”）.html（哦，天太冷了！呆在屋里一整天，喝一碗又好又热的火鸡汤。确保你不会冻僵
")
}
});

我用了一个条件。加上剩下的，就像我用这个一样

如果您仍然面临问题，请告诉我，以便我可以帮助您。

JavaScript代码需要在

标记中定义，否则它将无法工作。此外，您不能在JavaScript中混用html。在这里发布问题之前，请进行最少量的研究。你不能只是想知道一种语言应该如何工作，然后在文章中问为什么它不工作。在尝试与外部api接口之前，你应该学习javascript的基础知识

$(document).ready(function()
{
    $('#search').click(function()
    {
        var city = $('#city').val();
        console.log(city);
        $.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');
        });
    });

    if (Math.round(data.main.temp) < -5)
    {
        $("#YOU_CHOSEN_ID").html("<p> Oh man.. It is way too cold! Stay inside the whole day and have a nice and hot turkey soup. Make sure you don’t freeze </p>
        <iframe width='392' height='220' src='https://www.youtube.com/embed/SdJfxGo5PQM?rel=0&amp;showinfo=0' frameborder='0' allowfullscreen></iframe>")
    }
});