CODEWITHSUNDEEP
javascripthtmlalgorithm
Oluwafemi Akinyemi
Oluwafemi Akinyemi

Reputation: 119

Progress bar not working with my JavaScript Code

Presently, I have some plus buttons and minus buttons that increase and reduce together with a fixed value, but my issue now is I want my progress bar to reduce when each of the plus buttons is clicked and increases. Have written some Javascript code but it still doesn't work for me, all other things are actually working perfectly except for the progress bar that is not yet functioning with my code. The code I'm working with below

var total = document.querySelector(".Fixed_number");
var minusBtn = document.querySelectorAll("#minus");
var plusBtn = document.querySelectorAll("#plus");
var GetTotal = document.getElementById('get_all');
var value1 = document.getElementById('Contestant_One');
var value2 = document.getElementById('Contestant_Two');
var value3 = document.getElementById('Contestant_Three');
var value4 = document.getElementById('Contestant_Four');
var progress_bar = document.querySelector("progress-bar");

plusBtn.forEach(function(item) {
    item.onclick = function() {
        if (parseInt(total.innerText) > 0) {

            item.nextElementSibling.innerText = parseInt(item.nextElementSibling.innerText) + 1;
            total.innerText = parseInt(total.innerText) - 1;




            plusBtn.onclick = function() {
                if (parseInt(total.innerText) < 0) { return; }
                parseInt(total.innerText) --;
                progress_bar.css("width", Math.round(100 * parseInt(total.innerText)) + "%");
            };

            if (parseInt(total.innerText) == 0) {
                console.log(item);
            }













        }
    };
});

minusBtn.forEach(function(item) {
    item.onclick = function() {
        if (parseInt(item.previousElementSibling.innerText) > 0) {
            item.previousElementSibling.innerText = parseInt(item.previousElementSibling.innerText) - 1;
            total.innerText = parseInt(total.innerText) + 1;
        }
    };
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <title>Testing JS</title>
</head>

<body>

    <!-- <div id="myProgress">
        <div class="progress_bar"></div>
    </div> -->



    <div style="padding: 1em;">
        <div class="progress">
            <!--     <div id="progressbar" class="progress-bar progress-bar-striped active" style="width: 5%"></div> -->
            <div class="progress" style="height: 20px; width: 50px;">
                <div style="width: 50%;" class="progress-bar"></div>
            </div>
            <button id="next">next</button>
        </div>



        <div class="Fixed_number">10</div>

        <ul class="countries">

            <form>
                <label for=""> Contestant_One
        <div id="" class="country">
            <button id="plus"   type="button">+</button>
            <span id="Contestant_One" class="Contestant-One" >0</span>
            <button id="minus"  type="button">-</button>
        </div>
        </label>
            </form>




            <form>
                <label for=""> Contestant_Two
        <div id="" class="country">
            <button id="plus" type="button">+</button>
            <span id="Contestant_Two" class="Contestant-Two" >0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
            </form>


            <form>
                <label for="" class="country"> Contestant_Three
        <div id="">
            <button id="plus" type="button">+</button>
            <span id="Contestant_Three" class="Contestant-Three" >0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
            </form>




            <form>
                <label for="">Contestant_Four
        <div id="" class="country">
            <button id="plus" type="button">+</button>
            <span id="Contestant_Four" class="Contestant-Four" >0</span>
            <button id="minus" type="button">-</button>
        </div>
        </label>
            </form>
        </ul>


        <div id="all_total">
            <div id="message"> </div>
            <!-- <button id="get_all" type="submit"></button> -->
        </div>






        <script type="text/javascript" src="app.js"></script>


</body>

</html>

when the minus buttons are also clicked. have written some code but it's not working. The code I'm working with below.

Upvotes: 0

Views: 295

Answers (1)

Shen
Shen

Reputation: 9

The way I see it, you are assigning a function to an onclick event, and in this function you are assigning another function to another onclick event. Try to remove everything from this except the check for < 0 and the width change.

plusBtn.onclick = function() {
      if (parseInt(total.innerText) < 0) { return; }
      parseInt(total.innerText) --;
      progress_bar.css("width", Math.round(100 * parseInt(total.innerText)) + "%");
};

I tested it with something like this:

item.nextElementSibling.innerText = parseInt(item.nextElementSibling.innerText) + 1;
total.innerText = parseInt(total.innerText) - 1;

if (parseInt(total.innerText) < 0) {
    return;
}

document.getElementById("bar").style.width = Math.round(10 * parseInt(total.innerText))  + "%";

I also changed the number from 100 to 10 because with your code, the progress bar would be of width 1000% instead of 100%.

It is also important to copy the last line to the minus button onclick function as well!

Summary:

Remove plusBtn.onclick = function() { and parseInt(total.innerText) --;

Change var progress_bar = document.querySelectorAll("progress-bar");

to var progress_bar = document.querySelector(".progress-bar");

Change progress_bar.css("width", Math.round(100* parseInt(total.innerText)) + "%");

to progress_bar.style.width = Math.round(10* parseInt(total.innerText)) + "%";

And copy this

progress_bar.style.width = Math.round(10 * parseInt(total.innerText)) + "%";

to your onclick for all minus buttons as well.

Upvotes: 1

Related Questions