Задать вопрос
zalman2
@zalman2
javascript

Как выполнять итерацию по каждому клику?

Подскажите пожалуйста, как добавлять событие по каждому клику?
Есть шкала прогресса, необходимо добавлять по каждому клику 25%

https://jsfiddle.net/qwdn5v72/17/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="level">
    <div class="line"></div>
  </div>
  <button class="btn"></button>
</body>
</html>


.level {
  width: 100%;
  height: 50px;
  background: #eee;
}
.line {
  width: 10%;
  height: 50px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.line::before {
    content: '5%';
}
.line.active1 {
    transition: 0.3s;
    width: 25%;
}
.line.active1::before {
    transition: 0.3s;
    content: '25%';
}
.btn {
  width: 10%;
  height: 20px;
  background: red;
  margin-top: 15px;
}


function progressBar() {
    let levelFull = document.querySelector('.line');
    let levelBtn = document.querySelector('.btn');

    function progressActive() {
        for (var i = 1; i <= 4; i++) {
            levelFull.classList.add('active1');
        }
    }
    levelBtn.addEventListener('click', progressActive);
}
progressBar();
  • Вопрос задан
  • 104 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
lina666
@lina666
Изучаю веб ЯП.
1. Зачем было оборачивать все еще в 1 функцию
2. Там цикл совсем не нужен внутри другой функции.
3. Можешь использовать style и добавлять туда % нужный в width, если нужны классы можно сделать 4 класса и добавлять их, используя так же счетчик который будет пополняться на 1 после каждого вызова, т.е кликнули 3 раза.
Сначала count = 1 поставили класс element.classList.add('line-active' + count

Вот рабочий пример 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="level">
    <div class="line">5%</div>
  </div>
  <button class="btn"></button>
</body>
</html>

<code lang="css">
.level {
  width: 100%;
  height: 50px;
  background: #eee;
}
.line {
  width: 10%;
  height: 50px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.line.active1 {
    transition: 0.3s;
    width: 25%;
}
.btn {
  width: 10%;
  height: 20px;
  background: red;
  margin-top: 15px;
}
</code>


let levelFull = document.querySelector('.line');
    let levelBtn = document.querySelector('.btn');
let startPercent = 5

function progressActive() {
    startPercent = startPercent + 25
    if (startPercent > 100) startPercent = 100
    levelFull.style.width = startPercent + '%'
    levelFull.textContent = startPercent + ' %'
 }

levelBtn.addEventListener('click', progressActive);
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать лейдинг на Joomla
24 апр. 2024, в 22:11
2000 руб./за проект
Консультация ПЛИС (FPGA)
24 апр. 2024, в 22:00
500 руб./в час
SEO сайта услуг
24 апр. 2024, в 21:49
10000 руб./за проект
Ещё заказы