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