I'm very new to coding...
I'm trying to make a multiple to do lists that you can check off completed task and it would calculate the percentage done for each list independently.
I started off using by building from this: How do I define var i based on which check box is checked?
...and have personalized it into the below which works fine but when I duplicate it on the same page but with a different list of questions however the check boxes don't add up independently on different progress bars.
<<!DOCTYPE html>
<html>
<head>
<script>
var list;
document.addEventListener("DOMContentLoaded",load);
function load(){
list = get("list");
checkboxes = getTag("input");
for(var i = 0, l = checkboxes.length; i < l; i++){
checkboxes[i].addEventListener("click", toggle);
}
updatePercentage();
}
function updatePercentage(){
var checkboxes = getTag("input");
var total = checkboxes.length;
var done = 0;
for(var i = 0, l = checkboxes.length; i < l; i++){
if(checkboxes[i].checked){
done++;
}
}
get('percent').innerHTML = 'Done: '+Math.round((done/6)*100)+'%';
}
function newCheckbox(){
var item = document.createElement('li');
var chk = document.createElement('input');
chk.type = 'checkbox';
chk.addEventListener("click", toggle);
item.appendChild(chk);
list.appendChild(item);
updatePercentage();
}
function toggle(){
//alert(this.value);
updatePercentage();
}
function get(id){
return document.getElementById(id);
}
function getTag(tag){
return document.getElementsByTagName(tag);
}
</script>
</head>
<body>
<h2>Women's State Leagues</h2>
<h4>For WSL, referees must ensure they have:</h4>
<ul id="list">
<input type="checkbox" value="true"> Emailed a copy of both teams match records to results@ffv.org.au
<input type="checkbox" value="false"> Submitted your <span style="text-decoration: underline;"><a href="http://ift.tt/1zPQmhq">Best & Fairest</a></span> Votes
<input type="checkbox" value="true"> If a red card was issued, complete a Misconduct Report
<input type="checkbox" value="false"> If an incident occurred that does not come under the Laws of the Game, have you completed a Incident Report
<input type="checkbox" value="true"> If you have concerns about the pitch, complete a Facility & Pitch Inspection Report
<input type="checkbox" value="false"> Update and confirm your Schedula availability for next week
</ul>
<div id="percent"></div>
</body>
</html>
What do i need to do so that a duplicate of the above would can identify and work independently??
Aucun commentaire:
Enregistrer un commentaire