@antowa_plawkevich
Junior Front-end developer

Скрипт отрабатывает только 1 раз?

Добрый день, столкнулся с такой проблемой , у меня есть модальное окно , по клику на ссылку оно открывается и там по средствам аякса я подтягиваю информацию.
Так же в этом модальном окне я написал 2 скрипта, первый отвечает за смену картинки при смене селекта, а второй подсчет цены при клике на кнопку.
При загрузке страницы Скрипт отрабатывает идеально, но когда открыл модалку , закрыл и сново открыл ее скрипт перестает работать и не показывает ни единой ошибки.
Разметка модального окна
<div class="modal fade post-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content ajax rounded-0">
            <div class="modal-header cake-orders__header border-0">
                <button type="button" class="cakes-orders__close-btn" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><img class="cakes-orders__close-ic" src="<?php bloginfo('template_directory')?>/assets/img/cakes__close-ic.svg"></span>
                </button>
                <div class="cakes__logo-wrapper text-center">
                    <a href="/cakes">
                        <p><img class="cakes__logo mt-5" src="<?php bloginfo('template_directory')?>/assets/img/cakes__logo.svg"></p>
                    </a>
                    <div class="cakes__logo-text d-flex flex-column">
                        <a href="/">
                            <p class="mb-0"><img class="cakes__logo-title" src="<?php bloginfo('template_directory')?>/assets/img/cakes__logo-title.svg"></p>
                        </a>
                        <a href="/cakes">
                        <p>
                            <span class="cakes__logo-description">
                              <img class="w-10" src="<?php bloginfo('template_directory')?>/assets/img/long-dash.svg"> <span>cakes</span> <img class="w-10" src="<?php bloginfo('template_directory')?>/assets/img/long-dash.svg">
                            </span>
                        </p>
                        </a>
                    </div>
                </div>
                <hr>
                <p class="mt-3 text-center">
          <span class="cakes-orders__description">
            Каждый торт уникален, как и событие каждого из нас.<br>
            Калькулятор даёт ориентировочную цену, в которой учитываются начинка + возможные дополнительные элементы торта.<br>
            Точная цена может оказаться на 10-20% ниже от максимальной в диапазоне, после вычета надбавки за фигурки и украшения.
          </span>
                </p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-5 offset-lg-1">
                        <div class="cakes__cake-image-wrapper">
                            <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($my_post->ID)); ?>">
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <p class="cakes__cake-name"><?php echo $my_post->post_title?></p>
                        <p class="cakes__cake-select-filling-title">Выберите начинку:</p>
                        <p class="cakes__cake-select-filling">
                            <select name="fillings" id="fillings" class="form-control fillings">
                                <?php $modalContents = carbon_get_post_meta('28','crb_price');
                                foreach ($modalContents as $modalContent):
                                    ?>
                                    <option class="test" value="<?php echo $modalContent['crb_price'];?>" data-img="<?php echo $modalContent['crb_image'];?>" data-content="<?php echo $modalContent['crb_description'];?>"><?php echo  $modalContent['crb_name'];?></option>
                                <? endforeach;?>
                            </select>
                        </p>
                        <div class="result"></div>
                        <div class="cakes__cake-selected-filling">
                            <div id="cakes__cake-selected-img" class="cakes__cake-selected-img"><img src="<?php echo $modalContent['crb_image'];?>"></div>
                            <div id="cakes__cake-selected-description" class="cakes__cake-selected-description ml-3"><?php echo $modalContent['crb_description'];?></div>
                        </div>
                        <p class="cakes__cake-enter-guests-number-label mt-5">Введите количество гостей:</p>
                        <p class="cakes__cake-select-filling">
                            <input type="number" name="guests_number" id="guests_number" class="form-control guests_number" min="10">
                        </p>
                        <p id="test"></p>
                        <p id="guests-number-validation-message" class="guests-number-validation-message"></p>
                        <p class="text-center"><button name="button" type="button" id="cakes__cake-calculate-price" class="cakes__cake-calculate-price" value="">Рассчитать цену</button></p>
                        <p class="cakes__cake-price text-center" id="cakes__cake-price"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 cakes-orders__footer">
                <img class="cakes-orders__border-bottom" src="<?php bloginfo('template_directory');?>/assets/img/cakes-orders__border-bottom.png">
            </div>
        </div>
    </div>
</div>

Скрипт на смену фото
const selectElement = document.querySelector('.fillings');

            selectElement.addEventListener('change', function () {
                let changeImg = document.querySelector('.cakes__cake-selected-img img');
                let result = document.querySelector('.cakes__cake-selected-description');
                let atrImg = selectElement.options[selectElement.selectedIndex].getAttribute('data-img');
                let atrText = selectElement.options[selectElement.selectedIndex].getAttribute('data-content');
                changeImg.setAttribute('src', atrImg);
                result.textContent = atrText;
            });

Скрипт на подсчет цены
let buttonEl = document.getElementsByClassName('cakes__cake-calculate-price');
            for (let i = 0; i < buttonEl.length; i++){
                buttonEl[i].onclick = () => {
                    let selectEl = document.querySelector('.fillings');
                    let questNum = document.querySelector('.guests_number');
                    let message = document.querySelector('.guests-number-validation-message');
                    if(questNum.value < 10){
                        message.innerHTML = 'Минимальный заказ в Dolce — 2 килограмма.<br>Для человека на празднике золотая серединка — 200 грамм, тогда и всем хватает и с утра с чаем остаётся :)<br>Поэтому минимальное число гостей — 10-ть';
                    }else {
                        let minPrice = 2*selectEl.value + (2*selectEl.value * ((questNum.value / 10) -1));
                        let maxPrice = 2*selectEl.value + (2*selectEl.value * (0.4 + 1.4 * ((questNum.value / 10) -1)));
                        let cakePrice = document.querySelector('#cakes__cake-price');
                        message.innerHTML = '';
                        cakePrice.innerHTML = minPrice.toFixed(2) + ' ' + '-' + ' ' + maxPrice.toFixed(2) + ' ' + 'РУБ';
                    }
                }
            }

Буду очень благодарен за помощь или подсказки в нужном направлениее.
Спасибо.
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы