CODEWITHSUNDEEP
javascript
Knibber4
Knibber4

Reputation: 3

Javascript progress bar updating by checkboxes?

function update() {
   var checked = 0;
   var myBar = document.getElementById("myBar");
   //Reference the Form.
   var fruits = document.getElementById("fruits");
 
   //Reference all the CheckBoxes in Table.
   var chks = fruits.getElementsByTagName("INPUT");


 
   //Loop and count the number of checked CheckBoxes.
   for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
                checked++;
      }
   }
   if (checked > 0) {
     alert(((checked / 5) * 100) + " % of CheckBoxe(s) are checked.");
        return true;
   } else {
         alert("Please select CheckBoxe(s).");
           return false;
   }
}
h1 {
  text-align: center;
}

#myProgress {
  margin: auto;
  width: 50%;
  background-color: black;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
}

.buttonHold {
  text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="style/pogbar.css">
<script src="java/progress.js"></script>
</head>

<body>


<div id="myProgress">
  <div id="myBar"></div>
</div>
<br>

<div class="buttonHold">
<input type="button" value="Update" onclick="update()" />
</div>

<form id="fruits">
<input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label>
<input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label>
<input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label>
<input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label>
<input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label>
</form>


</body>
</html>

I am building a website, and looking to incorporate checkboxes and a progress bar using css and javascript. Im still new and looking for help. I want to use pure javascript to update the progress bar based on how many checkboxes are checked. I can get the code to alert me <https://jsfiddle.net/Knibber4/wyv2sr0q/3/> But I can not figure out how to get the code to update/fill the progress bar. Any help would be appreciated!

Upvotes: 0

Views: 1261

Answers (1)

imvain2
imvain2

Reputation: 15847

Instead of alert, you just use myBar.style.width = ((checked / 5) * 100) + "%";

Also instead of a loop you can just get length on querySelectorAll

function update() {
  var checked = 0;
  var myBar = document.getElementById("myBar");
  //Reference the Form.
  var fruits = document.getElementById("fruits");

  //Reference all the CheckBoxes in Table.
  boxes = fruits.querySelectorAll("input[type='checkbox']:checked");
  checked = boxes.length


myBar.style.width = ((checked / 5) * 100) + "%";
  if (checked == 0) {
    alert("Please select CheckBoxe(s).");
  }
return true;
}

checks = document.querySelectorAll("input[type='checkbox']");
checks.forEach(function(box) {
  box.addEventListener("change", function(e) {
      update()
  });
});
h1 {
  text-align: center;
}

#myProgress {
  margin: auto;
  width: 50%;
  background-color: black;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
}

.buttonHold {
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" href="style/pogbar.css">
  <script src="java/progress.js"></script>
</head>

<body>


  <div id="myProgress">
    <div id="myBar"></div>
  </div>
  <br>

  <div class="buttonHold">
    <input type="button" value="Update" onclick="update()" />
  </div>

  <form id="fruits">
    <input id="chkMango" type="checkbox" value="1" /><label for="chkMango">Mango</label>
    <input id="chkApple" type="checkbox" value="2" /><label for="chkApple">Apple</label>
    <input id="chkBanana" type="checkbox" value="3" /><label for="chkBanana">Banana</label>
    <input id="chkGuava" type="checkbox" value="4" /><label for="chkGuava">Guava</label>
    <input id="chkOrange" type="checkbox" value="5" /><label for="chkOrange">Orange</label>
  </form>


</body>

</html>

Upvotes: 3

Related Questions