Как напечатать результат функции JS внутри цикла веточек

Question

У меня есть две переменные ветки. Мне нужно передать их в мою js функцию travelTime () и вернуть результат в html -tag.
Вот код. Это не работает:

{% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="trainShedule-timeTravel">
                {% block javascripts %}
                    <script> travelTime('{{ item.departure.time }}', '{{ item.arrival.time }}' </script>
                {% endblock %}
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
    function travelTime(firstTime, secondTime){
        let getDate = (string) => new Date(0, 0,0, string.split(':')[0], string.split(':')[1]); 
        let different = (getDate(secondTime) - getDate(firstTime));
        let hours = Math.floor((different % 86400000) / 3600000);
        let minutes = Math.round(((different % 86400000) % 3600000) / 60000);
        let result = hours + ':' + minutes;
        $(this)[0].innerHTML = result;
    }
</script>

Answer 1

Сначала вам нужно сделать ясным html, не внедряя в ваш код javascript.

Передайте переменные в html узлы-узлы в веточке l oop и удалите идентификаторы узла, используйте классы, например:

 {% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="data_output" data-departure="{{ item.departure.time }}" data-arrival= "{{ item.arrival.time }}"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

, затем улучшите ypur js вот так :

<script>
    //you don't need params in your functions, we need to get data other way..
    function travelTime(){
        //collect nodes you want to add value
        let dataNodes = document.getElementsByClassName('data_output');

        //loop over dataNodes
        for(let i = 0; i < dataNodes.length; i++){

          //get current values for this node
          let departure = dataNodes[i].dataset.departure;
          let arrival = dataNodes[i].dataset.arrival;

          //here you do your mathematics stuff
          //.... result..

          //finally pass data to html-node          
          dataNodes[i].innerHTML = result;
        }
    }

    //don't forget to call function!
    travelTime();
</script>

Answer 2

<script> теги не ограничены так, как вы предполагаете. Вместо этого вы должны инвертировать подход:

1. Добавьте необходимые метаданные, такие как item.departure.time и item.arrival.time, в атрибуты HTML5 data-, например, data-departure-time="{{ item.departure.time}}".
2. Используйте JS для итерации по этим элементам и извлечения этих метаданных, используя Element.dataset . На каждой итерации вызывайте вашу функцию travelTime() с полученными данными, а затем установите для элемента innerText возвращаемое значение. Вы можете получить доступ к значению атрибута data-departure-time, используя, например, Element.dataset.departureTime (обратите внимание на случай с кебабом в вашем случае с верблюдом разметки VS в JS)

p / s: обратите внимание, что Вы не должны использовать дубликаты идентификаторов, поэтому я заменил его на использование класса.

<div
    class="trainShedule-timeTravel"
    data-departure-time="{{ item.departure.time }}"
    data-arrival-time="{{ item.arrival.time }}">

Затем, в вашем JS, просто переберите все элементы, соответствующие селектору .trainShedule-timeTravel:

function travelTime(firstTime, secondTime){
    let getDate = (string) => new Date(0, 0,0, string.split(':')[0], string.split(':')[1]); 
    let different = (getDate(secondTime) - getDate(firstTime));
    let hours = Math.floor((different % 86400000) / 3600000);
    let minutes = Math.round(((different % 86400000) % 3600000) / 60000);
    let result = hours + ':' + minutes;

    return result;
}

const els = document.querySelectorAll('.trainShedule-timeTravel');
Array.from(els).forEach(el => {
    el.innerText = travelTime(el.dataset.departureTime, el.dataset.arrivalTime);
});