Question

当我选中一个复选框时，我试图访问数组的第一个值。当选中所有复选框时，我想获得第二个值的访问权限。例如：如果你有三个任务要做，他们全都在0/3。当一个人完成时（1/3），它会说：＆＃34;好的去！＆＃34;当所有任务完成时（3/3），它说：＆＃34;很好地完成了，你已经完成了所有的任务！＆＃34; 它是关于待办事项列表的。

＆＃13;

/*jslint browser: true, devel: true, eqeq: true, plusplus: true, sloppy: true, vars: true, white: true*/

var progress = ["Nice going!", "Nicely done, you've completed all of the tasks!"];
var totaal_items = 0;
var totaal_items_checked = 0;

function updateItemStatus() {                    //
    var cbId = this.id.replace("cb_", "");
    var itemText = document.getElementById("item_" + cbId);

    if (this.checked) {
    		totaal_items_checked ++;
        itemText.className = "checked";                // checkbox checkt, deze aanhouden. Zie CSS .checked
         var totaaldiv =  document.getElementById("finished")
         totaaldiv.innerHTML = totaal_items_checked;
        
    } else {
        itemText.className = "";
        	// als je niet checkt zal de item van de lijst niet veranderd worden
    }
}

function renameItem() {
    var newText = prompt("Wil je de taak hernoemen?");            // prompt om de inhoud te wijzigen

    if (!newText || newText === "" || newText === " ") {        // als je iets renamed en het is een alleen een spatie of niks, renamed hij niet.
        return false;
    }

    this.innerText = newText;                    // de tekst kan gewijzigd worden
}

function removeItem(){
   this.style.display = "none";              // delete de item op de lijst. Hij verwijdert hem niet helemaal, hij laat hem alleen niet zien. ->>>> IS CSS <<<<<-
}


function addNewItem(list, itemText) {
		totaal_items ++;
    var date = new Date();                    // haalt de datum op
    var id = " " + date.getMinutes() + date.getSeconds() + date.getMilliseconds();    // maakt een id aan mbv de tijd, opgeteld
    


    var listItem = document.createElement("li");
    listItem.id = "li_" + id;                        // creeert een list item met een id
    listItem.ondblclick = removeItem;                // bij een dubbel-klik op de lijst item verwijdert hij de item van de lijst
    var totaaldiv =  document.getElementById("totaal")
    totaaldiv.innerHTML = totaal_items;
   
    var checkBox = document.createElement("input");
    checkBox.type = "checkbox";                            // create this attribute (type) , value checkbox
    checkBox.id = "cb_" + id;
    checkBox.onclick = updateItemStatus;                    // bij een klik op de checkbox kan je de status wijzigen    
    
    var span = document.createElement("span");
    span.id = "item_" + id;                            // checkbox en span hebben andere naam, maar delen nog steeds hetzelfde id
    span.innerText = itemText;
    span.onclick = renameItem;                            // bij een klik op de item kan deze worden gewijzigd


    listItem.appendChild(checkBox);                        // Maakt voor de lijst een checkbox en een span aan
    listItem.appendChild(span);
    list.appendChild(listItem);                            // Maakt een child list aan

}

var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {                        // onkeyup is any press on keyboard, maar we willen alleen enter

    if (event.which == 13) {                                //Event.which     (13) -> ENTER. Alleen als er op enter wordt gedrukt.
            var itemText = inItemText.value;                // property of event. gaat om welke key op je keyboard.

            if(itemText === "" || itemText == " ") {          //zorgt voor de cancel dat er daadwerkelijk niks komt. (zonder dit krijg je leeg veld)
            return false;
        }

        // elke keer als je een nieuw item aanmaakt, maak je een nieuwe lijst element, een input en span aan.
        addNewItem(document.getElementById("todoList"), itemText);

        inItemText.focus();                 // focust op textbox
        inItemText.select();                // selecteert alles als je op enter hebt gedrukt
    }
};


 for(var i = 0; i < 5; ++i) {
        alert(" Weet je zeker dat je gebruik wilt maken van Melvin's to-do-list?, klik nog " + (5-i) + " keer om verder te gaan! ");
}   // loop gemaakt die aan het begin van de pagina laadt. Er komt een popup tevoorschijn met een melding waarop je 5x moet drukken.


// Bronnenlijst:

//To-do List App - JavaScript Tutorial for Beginners. Easy Learn Tutorials. geraadpleegd op 15/01/2016 van https://www.youtube.com/watch?v=XGOJVfOW-bo

＆＃13;

todoList {
  font-family: 
  font-size: 30 px;
  
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 500px;
}

li {
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px 10px;
    color: #000;
}


li span {
    padding-left: 10px;
}

.checked {
    text-decoration: line-through;
    font-weight: bold;
    color: #c00;
}


.delete {
    display: none;
}

＆＃13;

<!DOCTYPE html>
    <title>To do list</title>

<body>
    <h1>To do list</h1>


            <p>
             <input type="text" id="inItemText"/>
            </p>

       <ul id="todoList"></ul>
       
       <pan id="finished">0
       </pan>/ <span id="totaal">0</span>
       

    <script src="js/todolist.js"> </script>


</body>
</html>

＆＃13;

选中复选框时访问该数组

0 个答案: