JavaScript: counting selected elements

by gabrieleromanato

HTML

<ul id="test">
    <li></li>
    <li></li>
    <li></li>
 <li></li>
    <li></li>
    <li></li>
 <li></li>
    <li></li>
    <li></li>
<li></li>
</ul>

<p>Number of selected objects: <span id="select-count">0</span></h1>

CSS

#test {
    width: 30em;
    margin: 2em auto;
    overflow: hidden;
}

#test li {
    float: left;
    height: 4em;
    width: 4em;
    margin-bottom: 1em;
    margin-right: 1em;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #ccc;
}

#test li.selected { background-color: #214c8b; }

JavaScript

var selectNum = 0;

function select(obj, elements) {

    elements = document.getElementsByTagName(elements);

    if (obj.className == "selected") {
        obj.className = "";
        selectNum--;
    }
    else {
        obj.className = "selected";
        selectNum++;
    }
    document.getElementById("select-count").innerHTML = selectNum;

    for (i = 0; i < 10; i++) {
        elements[i].onmouseover = elements[i].onmousedown;
    }

    obj.onmouseup = function() {
        for (i = 0; i < 10; i++) {
            elements[i].onmousedown = elements[i].onmouseover;
            elements[i].onmouseover = null;
        }
    }

}

var li = document.getElementsByTagName('li'),
    len = li.length,
    i;

for (var i = 0; i < len; i++) {

    var item = li[i];

    item.onmousedown = function() {
        select(this, 'li');
    };

}