How do I get the JS script to work in the selected block?

  • 0
    I have several popup windows on my site, when you click on the button, this window pops up, and a person can select a specific place on the railway train.
    Unfortunately JavaScript only works in the first popup window. If you perform any actions in the rest of the popup windows, then all information about the selected place of ticket cost will be displayed in the first popup window.
    $(".sa-scheme__berth-place").click(function() { // .sa-scheme__berth-place класс билетов которые выбирают пользователь. 
    //Во всех popup окнах, он одинаковый.
        var btn = document.getElementById('btn'); // Здесь я выбираю кнопку с атрибутом id="btn". 
    //В каждом popup окне, 1 кнопка с данным id
        var price = $(this).text(); //манипуляция со строкой price
        price = price.replace(/[^0-9.]/g, '');
        price = price.replace(/.(?=.{5})/g, '');
        if (!this.classList.contains('sa-scheme__berth-place_disabled')) {
           $(this).toggleClass("active");
           var text = "&nbsp;<span>" + this.innerHTML + "</span>,";
            $("#t12552").html($("#t12552").html().replace(text, ""));
            if ($(this).hasClass("active")) {
                $("#t12552").append(text);
                btn.classList.remove("wg-button_disabled"); //если какое либо место выбранно, удаляем из кнопки класс, а так же //атрибут disable
                btn.removeAttribute('disabled');
                var value = $("#t12552").children().length * price; //высчитывание цены билетов.
                document.getElementById("value").innerHTML = value; //обновление значения переменной value
            } else {
                value = $("#t12552").children().length * price;
                document.getElementById("value").innerHTML = value; //обновление значения переменной value
            }
        }
        if ($(".sa-scheme__berth-place.active").length) {
            $(".double-dots").show(); 
            $("#value").show();
        } else {
            $(".double-dots").hide();
            $("#value").hide();
            btn.classList.add("wg-button_disabled");
            btn.addAttribute("disabled");
        }
    });

    I'll show you how the script works in practice:
    A person opens the Seat Card popup, selects any free seat, and a button appears with id btn, and the total price of the selected tickets is calculated, and how many seats the person has chosen.

    If a person does something like that in a popup "coupe"

    all information will appear in the first popup window !!

    How to fix this, it never occurs to my head, I tried to use loops, the script does not work.
    Please explain how this should work, and what functions will help me with fixing this problem.
    If you have any questions about the code, please ask, I will try to answer.
    JavaScript Anonymous, Jun 28, 2019

  • 1 Answers
  • 0
    I haven't read your code thoroughly, but most likely the problem is in how you search for elements by the selector. I am assuming you are searching globally, which leads to problems.

    Usually, even for optimization, I limit the search not to the entire document, but to some container.

    const modal1 =  document.querySelector('#modal-1')
    const modal2 = document.querySelector('#modal-2')

    modal1.querySelector('button.send') // кнопка в первой модалке
    modal1.querySelector('.status').textContent = '...' // статус в первой модалке

    modal2.querySelector('button.send') // кнопка во второй модалке
    modal2.querySelector('.status').textContent = '...' // статус во второй модалке
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!