Question

该代码旨在将一些手动输入的假日目的地显示为无序列表，然后允许用户从下拉列表中进行选择，单击“提交”并获取当前天气信息。我的问题；

列表和下拉列表显示在Chrome和Firefox中。但不要在IE和Edge上显示。
提交按钮在chrome上有效，但是通过我理解的控制台，我无法加载错误。但是，该按钮似乎在Firefox中根本不起作用。
我可以在第76行获得帮助以确保我正确地对openweatherorg进行了api调用吗？

谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TRIPIO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body onload="getDate()">
    <div class="application">
        <h2>TRIPIO</h2>
        <p id="user"></p>
        <hr/>
        <h3>Top Vacation Deals <span id="date"></span></h3>
        <ul id="travel"></ul>
        <h4>Current weather info about a destination</h4>
        <form id="destform">
            <select id="list" class="field"></select><br/><br/>
            <input type="submit" value="Submit" class="submit">
        </form>
        <div id="information"></div>
    </div>

    <script>

        var loginname = sessionStorage.getItem('username');

        document.getElementById('user').innerHTML = 'Logged in as '+ loginname;

        function getDate() {
            var d = new Date();
            document.getElementById('date').innerHTML = d;
        }

        var holidays = [
            {
                destination: 'Dubai',
                price: 350000
            },
            {
                destination: 'Paris',
                price: 470000
            },
            {
                destination: 'Mauritius',
                price: 250000
            },
            {
                destination: 'South Africa',
                price: 300000
            }
        ];

        for(var i = 0; i < holidays.length; i++){
            console.log(holidays[i].price+' is the price for a trip to '+holidays[i].destination);
            document.getElementById('travel').innerHTML += '<li>'+ holidays[i].price + ' is the price for a trip to ' + holidays[i].destination+'</li>';
            document.getElementById('list').innerHTML += '<option>' +holidays[i].destination + '</option>';
        }

        function getInfo(e){
            e.preventDefault();
            var x = document.getElementById('list');
            var selection = x.options[x.selectedIndex].text; 
            console.log(selection);

            var xhttp = new XMLHttpRequest();

                xhttp.onreadystatechange = function(){
                    if(xhttp.readyState == 4 && xhttp.status == 200){
                        var weather = JSON.parse(xhttp.responseText);
                        document.getElementById("information").innerHTML = "<h5>The weather is ${weather.temp} degrees farenheit</h5>";
                    }
                }

            xhttp.open('GET', 'api.openweathermap.org/data/2.5/weather?q={'+selection+'}&APPID={602fb577e945c38c4df26c7504bf23ff}',true);
            xhttp.send();

        }

        document.getElementById('destform').addEventListener('submit', getInfo, false);

    </script>
    <footer>
        <p>This web application is running purely on Javascript &copy;</p>
    </footer>
</body>
</html>

不同浏览器的异常行为

0 个答案: