Progress Bar как перезапустить по клику?

Question

[Антонио Вивальди]

Есть такой прогресс бар не понимаю не чего в этом JS
пытался через онклик на елементе вызвать функцию но не знаю что функция должна обнулять или пытался перезагрузить этот блок типа подгрузить на страницу заново) короче я тот ещё знаток, помогите кто шарит плиз
https://codepen.io/webaloevera/pen/PrdQed

Answer 1

[MarvinJan]

Изначальный код вызывает некоторые вопросы конечно, тем не менее, так должно работать - https://codepen.io/marvinjan/pen/RzYBMm .

Изменения которые внес закомментированы между TOSTER CODE и TOSTER CODE END.

Comments

[Антонио Вивальди]

спасибо большое
у меня просто слайдер мне нужно по клику чтобы они заново срабатывали я думаю дальше разберусь

[Антонио Вивальди]

Если ты тут я не могу сделать чтобы по клику они все обнулялись )

[MarvinJan]

Антонио Вивальди, если нужно, чтобы по одному клику обнулялись все, то делается вот так

document.addEventListener("click", function() {
      piea.resetBar(circle1);
      pieb.resetBar(circle2);
      piec.resetBar(circle3);
    })

document меняем на элемент на который нужно кликать, чтобы сбросить. event listener у circle тогда по-удалять, оставить лишь объявления переменных circle'ов

[MarvinJan]

Антонио Вивальди, хотя можно и без переменных обойтись, поменял код, вместо document - кнопка ресета.

[Антонио Вивальди]

MarvinJan, //TOSTER CODE

const circle1 = document.querySelector(".piea");
const circle2 = document.querySelector(".pieb");
const circle3 = document.querySelector(".piec");

//TOSTER CODE END
});
document.addEventListener("click", function() {
piea.resetBar(circle1);
pieb.resetBar(circle2);
piec.resetBar(circle3);
})

и если у меня есть елемент
на класс вместо document не реагирует
может ты мне ещё дельную инфу по js кинешь
?)

[Антонио Вивальди]

MarvinJan,
const circle1 = document.querySelector(".piea");
const circle2 = document.querySelector(".pieb");
const circle3 = document.querySelector(".piec");

//TOSTER CODE END
});

var next = document.getElementById("next");

next.addEventListener("click", function() {
piea.resetBar(circle1);
pieb.resetBar(circle2);
piec.resetBar(circle3);
});

[MarvinJan]

Антонио Вивальди, там не класс должен быть а сам элемент, который нужно завернуть в переменную.

const resetButton = document.querySelector("CSS-SELECTOR")
или
const resetButton = document.getElementById("ID-БЕЗ-#")

потом уже resetButton.addEventListener;

Элемент может быть любым.

[MarvinJan]

Антонио Вивальди, да, так должно работать, если есть элемент с id "next". Обновил codepen, сделал по кнопке вместо документа, работает также.

[Антонио Вивальди]

скинь код пен у меня нет я уже ctrl f5 насквозь пробил думал может не грузит

[MarvinJan]

Антонио Вивальди, по ссылке в ответе, все тот же. F5 ты видимо то, что себе скопировал смотришь.