Changing element width by js in%

Question

Faced such a problem, while adding width in px is all right, and as a percentage some sort of nonsense comes out.

Each stage should be added 25% to the width of the progress bar

function stepByStepForm() { var nextStepBtn = $('.next-btn'), prevStepBtn = $('.prev-btn'), step = $('.step'), stepField = $('.step__field'); nextStepBtn.on('click', function (e) { var progressBarValue = $('.progress-bar').width(), progressBarStep = parseInt(progressBarValue += 100 / step.length); e.preventDefault(); if($(this).parent().find(stepField).val().length <= 0){ alert('Не заполнены поля') } else{ $('.progress-bar').width(progressBarStep + '%'); step.fadeOut(0); $(this).parent().next(step).show(); } }); prevStepBtn.on('click', function (e) { e.preventDefault(); step.fadeOut(0); $(this).parent().prev(step).show(); }); } stepByStepForm();

if here: $ ('. progress-bar'). width (progressBarStep + '%');
The first time adds 25% that's right, but then the value changes, but I would like to see every step + 25%, so this is the problem
Do you have to have 4 steps and add 25% to the width each time?

Accepted Answer · 2017-10-09T13:27:18

That's what you needed?

Your error was here progressBarStep = parseInt(progressBarValue += 100 / step.length); .

progressBarValue is the value in pixels, and it’s not important in the style that you added a property to the width of the block. Your pixels were added to percentages, and you get an error.

 var stepp = 0; function stepByStepForm() { var nextStepBtn = $('.next-btn'), prevStepBtn = $('.prev-btn'), step = $('.step'), stepField = $('.step__field'); nextStepBtn.on('click', function(e) { stepp = stepp + 1; var percent = parseInt(100/step.length); console.log(percent); var progressBarStep = stepp * percent; e.preventDefault(); if ($(this).parent().find(stepField).val().length <= 0) { alert('Не заполнены поля') } else { $('.progress-bar').width(progressBarStep + '%'); step.fadeOut(0); $(this).parent().next(step).show(); } }); prevStepBtn.on('click', function(e) { stepp--; var progressBarStep = stepp * 25; $('.progress-bar').width(progressBarStep + '%'); e.preventDefault(); step.fadeOut(0); $(this).parent().prev(step).show(); }); } stepByStepForm();

 .progress-bar{ height: 20px; width: 0%; background: green; transition: .5s width; } .step.first{ display: block; } .step{ display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form"> <form action=""> <div class="progress-bar"></div> <div class="step first"> <label> <input type="text" placeholder="1" class="step__field"> </label> <a href="" class="next-btn">Далее</a> </div> <div class="step"> <label> <input type="text" placeholder="2" class="step__field"> </label> <a href="" class="prev-btn">Назад</a> <a href="" class="next-btn">Далее</a> </div> <div class="step"> <label> <input type="text" placeholder="3" class="step__field"> </label> <a href="" class="prev-btn">Назад</a> <a href="" class="next-btn">Далее</a> </div> <div class="step"> <label> <input type="text" placeholder="3" class="step__field"> </label> <a href="" class="prev-btn">Назад</a> <a href="" class="next-btn">Далее</a> </div> <div class="step"> end </div> </form> </div>

This is how interest is determined by the number of steps.

progressBarStep = parseInt (progressBarValue + = 100 / step.length);

Changing element width by js in%

1 answer 1

More articles: