Почему рендер узла в DOM дереве происходит только после перезагрузки страницы?
Реализованный функционал:
При выборе авто из select и клику по кнопке "Добавить", рендерится карточка с авто. Суть в свойстве объекта Cruise, если Cruise === 1, когда checkbox === checked, то в карточке рендерится данный узел:
carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));
из функции addCruiseToRenderCarCart.
При Cruise === 0, соответственно узел "Круговой тариф" не будет рендерится в карточке авто. Данный функционал отрабатывает!
Так же я сделал фиктивный запрос с сервера в функции fetchVehicleData, с помощью которого, при клике по checkbox я получаю в панели "Тип транспорта" с сервера данные авто (которые сохранены у юзера в личном кабинете), которое юзер так же может отрендерить при клике по добавленным данным. При таком сценарии, с сервера в любом случае приходит Cruise === 1, и узел:
carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));
должен рендерится в карточке, но на данный момент узел не рендерится при первом добавлении, а рендерится в карточке уже после перезагрузки страницы. Я как смог вытащил и склеил куски кода с 3 модулей, где происходят все операции и реализовал сценарий событий. Ссылки на песочницы:
https://jsfiddle.net/6z8hfu4a/19/
https://codepen.io/Andy41/pen/mdvwGbY?editors=1111
Из того что я понял, по какой то причине, если добавлять с помощью функции getCarListAll то код не находит carCruiseContainer, хотя в DOM дереве devtools, он присутствует.
В двух словах нужно нажать на checkbox, а потом по добавленному тексту данных авто, что имеется на скриншоте:
Рендерится карточка с авто:
Та же карточка после перезагрузки страницы (Появился "Круговой тариф", хотя должен был появиться до перезагрузки страницы):
Ответы (1 шт):
Задача решена, оказывается вместо реализации данной функции: addCruiseToRenderCarCart,
можно всего лишь, в шаблоне функции renderCars() описать тернарник:
<div class="car__cruise">${car.Cruise === 1 ? 'круговой тариф' : ''}


