Home/ Questions/Q 7431639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:19:37+00:00

I’m trying to make a to do list that you can check off completed

  • 0

I’m trying to make a to do list that you can check off completed task and it would calculate the percentage done. So the first thing I tried was making a couple of checkboxes and adding an event listener for the click then I’ll check the value probably to see if it is = true or something like that.

I’m trying to figure out a way to define var i if I click on the first checkbox I want it to be set to 0 and the second set to 1. But I want it to dynamically set the var i because the user will be adding new checkboxes and I can’t declare what i equals after they add a new item. Anyway this is what I have so far.

<!DOCTYPE html>
<html>
<head>
    <title>To Do List</title>
    <script type="text/javascript">
    var list;
    var checkboxes;
    document.addEventListener("DOMContentLoaded",load);
    function load(){
        list = get("list");
        checkboxes = getTag("input");
        checkboxes[i].addEventListener("click",toggle);
    }
    function toggle(){
        alert(this.value);
    }
    function get(id){
        return document.getElementById(id);
    }
    function getTag(tag){
        return document.getElementsByTagName(tag);
    }
    </script>
</head>
<body>
    <h1>Kung Fu To Do List 1.0</h1>
    <ul id="list">
        <li><input type="checkbox" value="true"></li>
        <li><input type="checkbox" value="false"></li>
    </ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Honestly, I’m not sure what you mean by defining i. But it seems like what you’re looking for is calculating the percentage complete, and keeping that updated when/if the user adds new items. I wouldn’t keep track of checkboxes but instead loop over them when you need to calculate. Further, having a method that adds new checkboxes for you can then hook in the events you want to monitor. Something like: (jsfiddle: http://jsfiddle.net/nuuyx/)

    <!DOCTYPE html>
<html>
<head>
    <title>To Do List</title>
    <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/total)*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>
    <h1>Kung Fu To Do List 1.0</h1>
    <ul id="list">
        <li><input type="checkbox" value="true"></li>
        <li><input type="checkbox" value="false"></li>
    </ul>
    <div id="percent"></div>
    <button onclick="newCheckbox()">new item</button>
</body>
</html>
    • 0