Mała aplikacja w javascript. Problem logiczny :/

Question

Cześć. Zwracam się do was z prośbą o pomoc.

Chcę stworzyć mikro aplikacje one page, która po wciśnięciu odpowiedniego przycisku ładuje kolejne przyciski i zwiększa progress bar z kwotą.

Stworzyłem obiekt z trzema przyciskami, które pobrałem do tablicy. W przypadku wciśnięcia jednego z nich, wyświetla się podmieniona treść przycisków, które sugerują kolejne opcje w drzewku i zwiększają progress bar. Problem w tym, że cały czas korzystam z tych samych przycisków wykrywając je za pomocą funkcji onclick i program często wykonuje mi nie tą czynność kodu, którą chciałem wykonać. Nie mam pomysłu w jaki sposób mógłbym to rozwiązać.

kod:

var priceBar = new ldBar(".priceBar", {
    "value": 0
});

const calcBtn = document.querySelectorAll('.calcBtn');
calcBtn[0].addEventListener('click', () => {
    calcCore();
});
calcBtn[1].addEventListener('click', () => {
    calcCore();
});

function calcCore() {

    /* core variables */
    const calcObject = document.getElementById('calculatorModal');
    let btnList = calcObject.querySelectorAll('.button-group button');
    let h5 = calcObject.querySelector('.modal-body h5');

    /* start content reset */
    calcObject.querySelector('.right-side img').style.display = 'inline';
    calcObject.querySelector('.priceBar').style.display = 'none';
    setStartContent();

    function setStartContent() {
        h5.innerHTML = 'Usługi';

        btnList[0].innerHTML = '<img src="../../src/assets/modal/calculator/ft.svg" width="64px" alt=""><span>Strzyżenie włosów</span>'
        btnList[1].innerHTML = '<img src="../../src/assets/modal/calculator/sec.svg" width="64px" alt=""><span>Strzyżenie brody</span>';
        btnList[2].innerHTML = '<img src="../../src/assets/modal/calculator/th.svg" width="64px" alt=""><span>Strzyżenie włosów i brody</span>';

        /* ------------ wlosy -------------- */

        btnList[0].addEventListener('click', () => {
            priceBar.set(0);
            priceBar.set(450);

            calcObject.querySelector('.right-side img').style.display = 'none';
            calcObject.querySelector('.priceBar').style.display = 'inline';
            h5.innerHTML = 'Strzyżenie włosów';
            btnList[0].innerHTML = '<span>Włosy krótkie</span>'
            btnList[1].innerHTML = '<span>Włosy długie</span>'
            btnList[2].innerHTML = '';



            btnList[0].addEventListener('click', () => {
                priceBar.set(450);
                priceBar.set(850);

                h5.innerHTML = 'Włosy krótkie';
                btnList[0].innerHTML = '<span>Stylizacja włosów</span>'
                btnList[1].innerHTML = '<span>Bez stylizacji</span>'
                btnList[2].innerHTML = '';
            });
            btnList[1].addEventListener('click', () => {
                priceBar.set(450);
                priceBar.set(500);

                h5.innerHTML = 'Dodatkowe usługi';
                btnList[0].innerHTML = '<span>Mycie głowy</span>'
                btnList[1].innerHTML = '<span>Bez mycia głowy</span>'
                btnList[2].innerHTML = '';
            });
        });

        /* ------------ broda -------------- */
        btnList[1].addEventListener('click', () => {
            priceBar.set(0);
            priceBar.set(350);

            calcObject.querySelector('.right-side img').style.display = 'none';
            calcObject.querySelector('.priceBar').style.display = 'inline';
            h5.innerHTML = 'Strzyżenie brody';
            btnList[0].innerHTML = '<span>Na zero</span>'
            btnList[1].innerHTML = '<span>Na krótko</span>'
            btnList[2].innerHTML = '';

        });

        /* ------------ włosy i broda -------------- */
        btnList[2].addEventListener('click', () => {
            priceBar.set(0);
            priceBar.set(250);

            calcObject.querySelector('.right-side img').style.display = 'none';
            calcObject.querySelector('.priceBar').style.display = 'inline';
            h5.innerHTML = 'Strzyżenie włosów i brody';
            btnList[0].innerHTML = '<span>Dodatkowa stylizacja włosów</span>'
            btnList[1].innerHTML = '<span>Brak stylizacji włosów</span>'
            btnList[2].innerHTML = '';

        });
        /* ----------------------------- */
    }

}

Proszę nie zwracać uwagi na absurdalność przykładów. Są one tylko w celach poglądowych. Wracając do sedna. Jak można zauważyć w skrypcie znajduje się kilka funkcji odpowiadających na zdarzenie click, jednak zdarzenia te powielają się w przypadku przycisków co wprowadza trochę zamieszania i czasem otwiera się nie ta zakładka co trzeba. Prosiłbym o pomoc :)

 

Comments

mógłbyś pokazać klasę ldBar?

---

Tak, ale to nie ma związku z tematem.

<div class="priceBar label-center" data-value="0" data-max="3500" data-preset="circle"></div>

Ogólnie cały progress bar stoi na bibliotece loadingbar.js

Mój problem polega na uruchomieniu odpowiedniej funkcji po kliknięciu buttona - w zależności od tego w jakim elemencie aktualnie się znajduje.
Czyli:
Button 1: Strzyżenie
Button 2: Golenie

Kliknięcie w button 1:
Button 1: Krótkie
Button 2: Długie

Kliknięcie w button 2:
Button 1: Z myciem włosów
Button 2: Bez mycia włosów

---

Nie jestem pewien czy ci to pomoże ale można byłoby usuwać event za pomocą removeEventListener lub alternatywnie utworzyć zmienną która sprawdzałaby na którym etapie jesteś

---

Tej pierwszej opcji nie próbowałem. Zmienne mi nic nie pomagały.

---

@rszczepanski02, a czemu operujesz na tym samych dwóch przyciskach, zmieniając im tekst? Może zamiast tego podmieniaj te przyciski całościowo (wraz z podpiętymi listenerami) unikając duplikacji listenerów?

---

Chciałem zaoszczędzić kod. Podmiana przycisków za każdym razem równałaby się stworzeniem co najmniej 15 nowych zmiennych z nowymi przyciskami

---

Coś nie bardzo zaoszczędzasz na kodzie, skoro duplikujesz logikę obsługi kliknięć. Nie wiem jak masz rozpisany kod dla wszystkich przycisków, ale myślę, że można to poukładać w obiekty, które będą opisywać metadane przycisków, a żonglowanie ich widocznością zrobić w jednym miejscu.

Answer 1

Propozycja  

Może zamiast "kombinacji" z przyciskami zrób a'la listy wyborów.

 

P.S Jak interesuje Ciebie takie rozwiązanie udostępnię kod propozycji.  
      Oczywiście rozkład (kod html) i "stylowanie" (kod css) - do zmiany (utworzony na potrzeby tej demonstracji).

Listy tworzone są dynamicznie

const haircut_services = [
  { "name":"Włosy krótkie", "price":"250" },
  { "name":"Włosy długie", "price":"350" },
  { "name":"Stylizacja włosów", "price":"850" },
  { "name":"Bez stylizacji", "price":"0" },
  { "name":"Mycie głowy", "price":"500" },
  { "name":"Bez mycia głowy", "price":"0" }  
];

const beard_services = [
  { "name":"Na zero", "price":"200" },
  { "name":"Na krótko", "price":"350" },
  { "name":"Dodatkowa stylizacja brody", "price":"250" },
  { "name":"Brak stylizacji brody", "price":"0" }  
];

 

Comments

Dziękuje za podsunięcie pomysłu. Następnym razem skorzystam z tego rozwiązania chociaż tworzenie stron dynamicznych w czystym js to niezła zabawa heh. Przynajmniej zrozumiałem znaczenie frameworków takich jak angular. Ogólnie problem rozwiązałem przypisując do każdego kroku wartość do zmiennej, która była po kliknięciu w odpowiedni przycisk sprawdzana za pomocą warunków. Raczej słaba metoda, 450 linijek kodu w js.

 

Pozdrawiam :)