Могу ли я увеличить ширину через скрипт?

Question

[broke boi]

У меня есть линия, ее ширина в css:

.progress {
    left: 0;
    background-color: #4169e1;
    position: absolute;
    top: 50%;
    height: 4px;
    width: 0%;   //вот эту ширину, изначально 0% в начальной точке
    transform: translateY(-50%);
    z-index: -1;
    transition: 0.5s all;
}

В функии при нажатии кнопки должна увеличиваться длинна линии пропорционально количеству нажатий (всего 4 точки, т.е. 3 нажатия)

next.addEventListener('click', () => {
    currentActive++;
    if (currentActive > circles.length){
        currentActive = circles.length;
    }
    // console.log(currentActive);

    update();
});

function update () {
    circles.forEach( (circle, i) => {
        if (i<currentActive) {
            circle.classList.add('active');
        }else {
            circle.classList.remove('active');
        }
    });

    
    progress.style.width += (33 + '%');  //пытаюсь увеличить на 33% при каждом нажатии
}

Вопрос: могу ли я увеличивать ширину width в css при помощи увеличения в js , таким образом? Она увеличивается на 33% при первом клике, а далее не происходит увеличения. Я не cовем понимаю почему

Answer 1

[Иван]

В твоем случае, JS просто передает строку в CSS "33%". Для JS - это просто текст, не иначе.
При сложении, ты просто получишь "33%33%", т.к. сложил две строки.

Уверен, что это можно решить как-то еще правильнее, но вот так можно реализовать увеличение при клике, на 33% от ширины родителя.

Answer 2

[lamer350]

просто вы нигде ширину не добавляете, вам вот тут: progress.style.width = (33 + '%')
необходимо получить старую ширину и добавить к ней необходимое для вас увеличение, только js не будет считать в %, вам нужно конвертировать математически все в вычисление количество пикселей

Comments

[broke boi]

небольшая опечатка при копировании, у меня в коде было вот так:
progress.style.width += (33 + '%');

[ThunderCat]

Егор Калинин,

только js не будет считать в %

читать могете???

[broke boi]

ThunderCat, втф дядь, он при первом нажатии кнопки изменяет ширину с 0% до 33%...

[Иван]

Егор Калинин, в твоем случае, JS просто передает строку в CSS "33%". Для JS - это просто текст, не иначе.
При сложении, ты просто получишь "33%33%", т.к. сложил две строки.

[broke boi]

Иван, понял! спасибо!

[Иван]

Егор Калинин, там немного подправил ответ, посмотрите, может подойдёт.

[broke boi]

Иван, я сделал во так:

const act = document.querySelectorAll('.active');

    progress.style.width = ((act.length - 1)/ (circles.length -1)) * 100 + '%';

[broke boi]

Иван, спасибо за уделенное время!