Почему слушатель событий вызывает функцию, и она работает корректно лишь один раз?

Question

Делаю этапы прогресса через JS, пока что только изменяя длину специального div-а, который служит в роли полоски.

const buttonNext = document.getElementById('buttonNext')
buttonNext.addEventListener('click', nextStep)


function nextStep(){
    progressLine.style.width = `${progressLine.style.width + 175}px`
}

.progress-line {
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: #ff9a9a;
    top: 50%;
    transform: translateY(-25%);
    z-index: -1;
    left: 0;
}

<div class="progress-steps" id="steps-wrapper">
  <div class="step active">1</div>
  <div class="step">2</div>
  <div class="step">3</div>
  <div class="step">4</div>
  <div class="progress-line-default"></div>
  <div class="progress-line"></div>
</div>

При клике должна изменяться ширина div-а .progress-line, но происходит это не несколько а один раз. Подскажите, почему так происходит?

Answer 1

progressLine.style.width возвращает строку с числом и постфиксом px (175px). Если к такой строке прибавлять число, то будет просто конкатенация и итог будет '175px175'. А потом ещё конкатенируется px и итог получается '175px175px', естесственно такой ширины не бывает.

Надо парсить строку и убирать px

const buttonNext = document.getElementById('buttonNext');
const progressLine = document.getElementById('progressLine');


buttonNext.addEventListener('click', nextStep)


function nextStep(){  
    progressLine.style.width = `${parseFloat(progressLine.style.width || 0) + 175}px`
}

.progress-line {
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: #ff9a9a;
    top: 50%;
    transform: translateY(-25%);
    z-index: -1;
    left: 0;
}

<div class="progress-steps" id="steps-wrapper">
  <div class="step active">1</div>
  <div class="step">2</div>
  <div class="step">3</div>
  <div class="step">4</div>
  <div class="progress-line-default"></div>
  <div class="progress-line" id="progressLine"></div>
</div>


<button id="buttonNext">buttonNext</button>

БЛОГ НА HUSL

Почему слушатель событий вызывает функцию, и она работает корректно лишь один раз?

Ответы (1 шт):