Question

I have a set of buttons. I want that when I do mouse up on one of the buttons, that particular button will change its back colour while all the other will remain the same.

Any help on how to do it without having any post back.?

Answer 1

Here’s a fairly clunky way to do it:

<style>
.selected { background-color : red; }
</style>
<script>
var theForm = document.getElementById("someForm");
theForm.onmouseup = function(e) {
    // allow for IE
    if (!e) e = window.event;

    var src = e.srcElement || e.target;

    if (src.tagName.toLowerCase() === "input"
        && src.type.toLowerCase() === "button"){
        src.className = "selected";
        for (var i = 0; i < theForm.children.length; i++)
            if (src != theForm.children[i])
                theForm.children[i].className = "";
    }             
};
</script>

Demo: http://jsfiddle.net/Yn3pT/

This assumes the buttons are children of a form called “someForm” and that a class “selected” exists that has the appropriate colour – obviously you’ll modify this as appropriate to suit your markup.

Note that the above should either be in an onload handler or the script block should be somewhere after the elements in the source.

Note also that onclick would be much more appropriate than onmouseup for this.