• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Mała aplikacja w javascript. Problem logiczny :/

+1 głos
87 wizyt
pytanie zadane 12 marca w JavaScript przez rszczepanski02 Użytkownik (690 p.)

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 :)

 

komentarz 12 marca przez Author[] Bywalec (2,800 p.)
mógłbyś pokazać klasę ldBar?
komentarz 12 marca przez rszczepanski02 Użytkownik (690 p.)
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
komentarz 12 marca przez Author[] Bywalec (2,800 p.)
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ś
komentarz 12 marca przez rszczepanski02 Użytkownik (690 p.)
Tej pierwszej opcji nie próbowałem. Zmienne mi nic nie pomagały.
komentarz 12 marca przez ScriptyChris Mędrzec (168,660 p.)

@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?

komentarz 12 marca przez rszczepanski02 Użytkownik (690 p.)
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
1
komentarz 12 marca przez ScriptyChris Mędrzec (168,660 p.)
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.

1 odpowiedź

0 głosów
odpowiedź 15 marca przez VBService VIP (137,830 p.)
wybrane 15 marca przez rszczepanski02
 
Najlepsza

Propozycja  wink

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.  smiley
      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" }  
];

 

1
komentarz 15 marca przez rszczepanski02 Użytkownik (690 p.)
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 :)

Podobne pytania

0 głosów
0 odpowiedzi 53 wizyt
0 głosów
0 odpowiedzi 224 wizyt
pytanie zadane 10 października 2017 w Sprzęt komputerowy przez Dawidinietylko Nowicjusz (120 p.)
0 głosów
1 odpowiedź 398 wizyt
pytanie zadane 4 marca 2017 w Sprzęt komputerowy przez kon.bed21 Obywatel (1,610 p.)

85,873 zapytań

134,644 odpowiedzi

298,914 komentarzy

56,740 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 926p. - rucin93
  2. 925p. - Whistleroosh
  3. 912p. - nidomika
  4. 876p. - adrian17
  5. 867p. - Michal Drewniak
  6. 866p. - Mikbac
  7. 863p. - Mateusz Bogdan
  8. 859p. - CC PL
  9. 797p. - Argeento
  10. 704p. - ScriptyChris
  11. 683p. - tokox
  12. 660p. - Vinox
  13. 645p. - TheLukaszNs
  14. 642p. - s. Dorota Kowalewska
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...