Question

function lookup(city,day){
    alert("I am seeing a city of " + city + " and a day of " + day);  // Remove. Only for testing
    var nday = parseInt(day);
    switch(nday){
        case 0: return sunday(city); break;
        case 1:
        case 2: return tuesday(city); break;
        case 3:
        case 4:
        case 5:
        case 6:
        default: alert("Monterey, we have a problem!  I'm seeing a day of " + nday);
    }
}

function sunday(city){
    var returnString = "";
    switch(city){
        case "New York City":
        case "Honolulu":
        case "Hong Kong":
        case "Beijing":
        case "Tokyo":returnString = "MAS 975©Tuesday©20:00©14:00©$500.00"; return returnString; break;
        case "Ulaanbaatar":
        case "London":    
        default: alert("Destination invalid!  I'm seeing a destination of " + city); break;
    }
}

function tuesday(city){
    alert("I am seeing a city of " + city );    //  Remove. Only for testing purposes
    var returnString = "";
    switch(city){
        case "New York City": 
        case "Honolulu":
        case "Hong Kong":
        case "Beijing":
        case "Tokyo": returnString = "MAS 304©Tuesday©15:30©6:30©$650.00"; return returnString; break;
        case "Ulaanbaatar":
        case "London": returnString = "MAS 975©Tuesday©20:00©14:00©$500.00"; return returnString; break;   
        default: alert("Destination invalid!  I'm seeing a destination of " + city); break;
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--Wei Wu Section A-->
    <title>I suppose it's time to get Formal</title>
    <style>
        form {padding: 10px; font: lust script, minion pro, sans-serif; font-size: 18pt; line-height: 24pt; background-color: azure;text-align: center;}
        .resultDec {
            font: tahoma, serif; 
            font-style: italic; 
            font-size: 16pt; 
            background-color: lightyellow; 
            line-height: 24pt;
            text-align: center;
        }
        
    </style>
    <script>
        function fullFunc(){
            display();
        }
        function flightInfo(){
            var travelDay = document.getElementsByClassName('travelDay');
            var des = document.getElementById("destination");
            var strDes = des.options[des.selectedIndex].text;
            for (var i =0; travelDay[i];i++){
                if (travelDay[i].checked) {
                        var getData = lookup(destination.value,travelDay[i].value);
                        var getDataList = getData.split("©");
                        alert(getDataList); 
                        /*for (i=0;i<getDataList.length;i++){
                            para = document.createElement("p");
                            node = document.createTextNode(getDataList[i]);
                            para.appendChild(node);
                            element = document.getElementById("divForAppend");
                            element.appendChild(para);
                            document.getElementById("airlineNum").innerHTML += getDataList[i] +"<br>";
                        }*/
                    }
                }
            }
        function display(){
            var first = document.getElementById("firstName").value;
            var last = document.getElementById("lastName").value;
            document.getElementById("forName").innerHTML = "Hello " + first + " " + last;
            //This part is for displaying your name


            var des = document.getElementById("destination");
            var strDes = des.options[des.selectedIndex].text;
            document.getElementById("forDes").innerHTML = "Your destination is " + strDes + ".";
            //This part is for displaying your destination


            var bDay = document.getElementById("date").value;
            document.getElementById("forBday").innerHTML = "Birthday: " + bDay;
            ageList = bDay.split("-");
            // alert(ageList); just for test
            var day = ageList[2];
            var month = ageList[1];
            var year = ageList[0];
            var today = new Date();
            var currentYear = today.getFullYear();
            var currentMonth = today.getMonth() + 1;
            var currentday = today.getDate();
            var age = 0;
            if (month < currentMonth){
                age = currentYear - year;
                document.getElementById('forAge').innerHTML = "Age: " + age + " years old.";
            }else if (month == currentMonth && day <= currentday){
                age = currentYear - year;
                document.getElementById('forAge').innerHTML = "Age: " + age + " years old.";
            }else{
                age = currentYear - year - 1;
                document.getElementById('forAge').innerHTML = "Age: " + age + " years old.";
            }
            if (age<= 2) {
                document.getElementById("forAge").innerHTML += "<br>" + " The price for domestic flights (Hawaii and NYC) are free and international flights are only 10% ! "
            }
            //This part is for displaying your birthday AND age


            var radioButton = document.getElementsByName('gender');
            for (var i = 0; i < radioButton.length; i++){
                if (radioButton[i].checked){
                    document.getElementById("forGender").innerHTML = "Your gender: " + radioButton[i].value +"<br>" + "<br>" + "Your flight information: " + "<br>";
                    break;
                }
            }
            flightInfo();
        }
            //This part is for displaying your gender.

    </script>
    <script src="airport.js" type="text/javascript">
    </script>
</head>
<body>
<div class="wholeForm">
    <form action="#" name="defineMe" autocomplete="off">        
    <label for="firstName">First Name: </label>
    <input type="text" name="firstName" id="firstName" value=""><br>
    <label>Last Name: <input type="text" name="lastName" id="lastName" value=""></label><br>
    <label>Birthday: <input type="date" id="date" name="date" value=""></label><br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="male"> Male<br>
    <input type="radio" name="gender" value="Prefer not go disclose"> Prefer not to disclose<br>

    <select id="destination">
            <option> pick a distination </option>
            <option value="New York City">New York City</option>
            <option value="Honolulu">Honolulu</option>
            <option value="Hong Kong">Hong Kong</option>
            <option value="Beijing">Beijing</option>
            <option value="Tokyo">Tokyo</option>
            <option value="Ulaanbaatar">Ulaanbaatar</option>
            <option value="London">London</option>
    </select>
    <br>
    
    <fieldset>
        <legend>When you will travel?</legend>
        <div id="travelDay" class='todayTravel'>
            <input type="checkbox" name="travelDay1" value="0" class="travelDay"> Sunday<br>
            <input type="checkbox" name="travelDay2" value="1" class="travelDay"> Monday<br>
            <input type="checkbox" name="travelDay3" value="2" class="travelDay"> Tuesday<br>
            <input type="checkbox" name="travelDay4" value="3" class="travelDay"> Wednesday<br>
            <input type="checkbox" name="travelDay5" value="4" class="travelDay"> Thursday<br>
            <input type="checkbox" name="travelDay6" value="5" class="travelDay"> Friday<br>
            <input type="checkbox" name="travelDay7" value="6" class="travelDay"> Saturday<br><br>
        </div>
    </fieldset>
    <br>
    <input type="button" value="Submit (locally)" onclick="fullFunc()">
    </form>
    
    <div class="resultDec" id="divForAppend">
    <p id="forName"></p>
    <p id="forDes"></p>
    <p id="forBday"></p>
    <p id="forAge"></p>
    <p id="forGender"></p>
    <p id="forString"></p>
    <p id="airlineNum"></p>
    <p id="day"></p>
    <p id="departureTime"></p>
    <p id="arrivalTime"></p>
    <p id="price"></p>
    </div>
</div>
    

</body>
</html>

此代码主要用于使用来自用户的输入来确定他/她将要乘坐的航空公司。该库已定义且无法更改（由我们的教授lol给出）。并且用户可以同时选择多个travelday。

我的问题是：通过测试，当我使用“alert”或“console.log”时，我的代码工作正常。我可以看到多个输出。问题是：我们的教授希望我们拆分从js库返回的信息，然后将其输出到不同的行。

我尝试做的是创建新的p标签，然后将新p附加到代码的最底部，我的代码在HTML中的注释中（已被注释掉）。

一旦我使用已注释掉的代码在屏幕上显示它，我就不能再获得多天的信息了。例如，当我选择“星期二”和“星期日”（因为我在js中的测试数据仅在这两天可用），并且我选择目的地：“东京”时，我只能获得星期二东京的信息。

那么：如何在for循环中创建新的p标签（因为我想显示用户每天检查的所有信息）？非常感谢!!

Answer 1

首先，我建议您使用JavaScript的ES6功能。这将解决您的代码中的一些编码错误。我也不明白你的期望输出到底是什么。

我确实看了上面提到的注释代码，发现了一些编码错误。可能是以下代码可能会帮助您处理它。

我没有优化代码，只是删除了flightInfo函数中的一些错误，这可能会帮助您获得所需的内容。

    function flightInfo(){
        var travelDay = document.getElementsByClassName('travelDay');
        var des = document.getElementById("destination");
        var strDes = des.options[des.selectedIndex].text;
        for (var i =0; travelDay[i];i++){
            if (travelDay[i].checked) {
                var getData = lookup(des.value,travelDay[i].value);
                if(typeof getData != 'undefined') {
                    let getDataList = getData.split("©");
                    //alert(getDataList); 
                    for (let j=0;j<getDataList.length;j++){
                        para = document.createElement("p");
                        node = document.createTextNode(getDataList[j]);
                        para.appendChild(node);
                        element = document.getElementById("divForAppend");
                        element.appendChild(para);
                        document.getElementById("airlineNum").innerHTML += getDataList[j] +"<br>";
                    }
                }
            }
        }
    }

对我发现的一些错误的评论，

var getData = lookup（des.value，travelDay [i] .value）; - ＆GT;你提到了变量目标，它应该是des。了解JavaScript提升问题。 here

变量getData可以在天，星期三，星期六，星期五和星期六未定义。必须处理这个变量。

为什么总是获得相同输出的主要问题是因为你在两个for循环中都使用了变量'i'两次。我把一个改为'j'。

没有考虑其他问题。但我认为代码中存在更多问题。不确定

另外，我会尝试清除插入的段落标签，如果用户再次尝试重新提交表单，则标签会附加到现有标签上。

如何创建元素并在for循环中输出值

1 个答案: