CSS button: hover, disabling then re-enabling with javascript

Question

I have some buttons which have a hover effect which makes the button color darker on hover ( with css ).

When the user clicks on those buttons, i disable them via javascript.

when i want the procedure ( game ) to start again and i re-enable the buttons via javascript, the css button: hover effect does not work any more.

Any solutions?

the javascript enable/disable button functions are:

function jsEnableElement(id) {

if ( document.getElementById(id) ) {
    document.getElementById(id).style.background = "#3399FF";
    document.getElementById(id).style.cursor = "pointer";
    document.getElementById(id).disabled = false;
}

}

function jsDisableElement(id) {

if ( document.getElementById(id) ) {
    document.getElementById(id).style.background = "#DDDDDD";
    document.getElementById(id).style.cursor = "default";
    document.getElementById(id).disabled = true;
}

}

and function jsHangmanCheckLetter(sID, sLetter) { try { if ( g_GameIsActive === true ) { jsDisableElement(sID); } } catch(err) { alert("ERROR :: sHangmanCheckLetter(sLetter) :: " + err); } } — user1087448, Dec 08 '11 at 10:22

score 4 · Answer 1 · answered Dec 08 '11 at 10:21

I'm not sure why the behaviour breaks when you change the background color of an element eventhough you keep its ID or Class name. But appearently it does.

So another way for you to fix this, and its perhaps a better way is to change the class of the element.

I don't know what element you want to disable, but i'm using a DIV as example. A working demo can be found here:

http://jsfiddle.net/yVVk6/

But just for completness i'll add the code in here aswell

<html>
<head>
    <script>
        function jsEnableElement(id) {
            if ( document.getElementById(id) ) {
                document.getElementById(id).removeAttribute("disabled");
                document.getElementById(id).className = "enabled";
                //document.getElementById(id).disabled = false;
            }
        }

        function jsDisableElement(id) {
            if ( document.getElementById(id) ) {
                document.getElementById(id).removeAttribute("enabled");
                document.getElementById(id).className = "disabled";
                //document.getElementById(id).disabled = true;
            }
        }
    </script>
</head>
<body>
    <div id="hallo" class="enabled" onclick="jsDisableElement('hallo');">Click me to disable</div>
    <div onclick="jsEnableElement('hallo');">Click me to enable it again</div>
</body>

CSS:

.enabled {
    background: #3399FF;   
}
.enabled:hover {
    background: #00FF66;
}

.disabled {
    background: #DDD;
}

EDIT: Just another thing i would like to mention is, if you go with this solution, then i really advise you to use a library like jQuery. It allows you to easily edit, delete or add classes to elements. In this example i simply delete all classes from the element.

Here is a pure JavaScript way to manipulate classes .... very simple .... http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Manse, Dec 08 '11 at 10:34

score 0 · Answer 2 · edited Dec 08 '11 at 11:03

0

I think you can directly give the attribute as shown below:

document.getElementById("btnL1").setAttribute("disabled","true")   //to disable the button
document.getElementById("btnL1").removeAttribute("disabled")       //enable it again

edited Dec 08 '11 at 11:03

eeerahul

1,629
4
27
38

answered Dec 08 '11 at 10:29

Ranganadh Paramkusam

4,258
2
22
33

I think you have misunderstood the question - the enable / disable works - the problem is that the css :hover attribute doesnt work after being enabled again – Manse Dec 08 '11 at 10:33

CSS button: hover, disabling then re-enabling with javascript

2 Answers2

Linked

Related