Как создать элемент и вывести значение в цикле for - PullRequest
Новая
       2

Как создать элемент и вывести значение в цикле for

0 голосов
/ 07 мая 2018 

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). И пользователь может выбрать несколько поездок одновременно.

В чем мой вопрос: при тестировании мой код работает отлично, когда я использую «alert» или «console.log», я мог видеть несколько выходных данных. Дело в том, что наш профессор хочет, чтобы мы разбили информацию, возвращаемую обратно из библиотеки js, а затем вывели ее в разные строки.

То, что я пытался сделать, это создать новый тег p, а затем добавить новый p в самую нижнюю часть кода, и мой код находится в комментарии в HTML (он был закомментирован).

Когда я использую закомментированный код для его отображения на экране, я больше не могу получать информацию за несколько дней. Например, когда я выбираю «Вторник» и «Воскресенье» (поскольку мои данные тестирования в js доступны только за эти два дня) и я выбираю пункт назначения: «Токио», я мог получить информацию только для вторника Токио.

Итак: как я могу создать новый тег p в цикле for (потому что я хочу отображать всю информацию за каждый день, который проверял пользователь)? Большое спасибо !!

1 Ответ

0 голосов
/ 07 мая 2018

Во-первых, я бы предложил вам использовать функции ES6 JavaScript. Это решило бы некоторые ошибки кодирования, которые у вас есть в вашем коде. Я также не совсем понял, какой выход вы ожидаете.

Я посмотрел вышеупомянутый закомментированный код и обнаружил некоторые ошибки кодирования. Может быть, приведенный ниже код может помочь вам работать с ним.

Я не оптимизировал код, а просто удалил некоторые ошибки в функции 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); -> Вы упомянули переменную destination, вместо нее должна быть des. Читайте о проблемах подъема JavaScript. здесь

Переменная getData может быть неопределенной для дней, ср, чт, пт и сб. Обрабатывать эту переменную тоже нужно.

Основная проблема, почему вы всегда получали один и тот же вывод, заключалась в том, что вы использовали переменную 'i' дважды в обоих циклах for. Я изменил один на «J».

Не рассматривал другие вопросы. Но я думаю, что в коде есть больше проблем. Не уверен

Кроме того, я бы попытался очистить вставленные теги абзаца, если пользователь попытается повторно отправить форму снова, теги будут добавлены к существующим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...