CODEWITHSUNDEEP
javascript
NoviceCoder
NoviceCoder

Reputation: 319

Unable to individualize each progress bar (Vanilla Javascript)

I am trying to work on a snippet which has 3 progress bars and it can be controlled by 4 buttons to increment or decrement the progress bar value. It also has a select box to switch between the progress bars.

The problem is that I am unable to individualize each progress bar. When I am changing the value in the first selected progress bar it is working as expected. The problem arises when I am switching between the progress bar using the select box.

I am not able to understand why it is behaving in such manner. I am providing the link below for better understanding.

Scenario: When you select a progress bar from the select box the first time, it will work fine. When you select another progress bar then both the progress bars get effected.

I hope I was able to point out the problem clearly.

I am posting the JavaScript code below. Click here for the complete code.

const progressBars = document.getElementsByClassName('progress-bar'),
    buttons = document.getElementsByClassName('btn'),
    progressView = document.getElementsByClassName('percent'),
    pb_1 = progressBars[0],
    pb_2 = progressBars[1],
    pb_3 = progressBars[2],
    selector = document.getElementById('selector');

    function progressControl(selectedValue){
        let selectedPB = eval(selectedValue),
            progressPercent = selectedPB.firstElementChild,
            progress = parseInt(selectedPB.style.width);

        for(let i=0; i<buttons.length; i++){
            let eachBtn = buttons[i],
                controlBtn = parseInt(eachBtn.textContent);

            eachBtn.addEventListener('click', function(){
                progress += controlBtn;
                if(progress > 100){
                    selectedPB.classList.add('progress-bar-danger');
                } else if(progress <= 100 && progress >= 0) {
                    selectedPB.classList.remove('progress-bar-danger');
                } else {
                    progress = 0;
                }
                selectedPB.style.width = progress+'%';
                progressPercent.textContent = selectedPB.style.width;
            });
        }
    }

selector.addEventListener('change', function(){
    let selectedValue = selector.options[selector.selectedIndex].value;
    progressControl(selectedValue);
});

Upvotes: 0

Views: 53

Answers (1)

Dinh Tran
Dinh Tran

Reputation: 614

Your problem is in this line

 eachBtn.addEventListener('click', function(){

Each time you change the select's value, you're adding a new click event for the old button instead of replacing the old event listener.

I can think of 2 solutions:

  1. Move eachBtn.addEventListener outside of the function progressControl so that you add the eventListener only once.
  2. Use eachBtn.onclick = function(){} instead of addEventListener so that you overwrite the eachBtn's existing click handler instead of creating new handlers.

Upvotes: 1

Related Questions