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;
}

}

<button id="btnL1" type="submit" onclick="jsHangmanCheckLetter(id, 'a');"><span id="span1">a</span></button> — user1087448
– user1087448, Commented Dec 8, 2011 at 10:20
and function jsHangmanCheckLetter(sID, sLetter) { try { if ( g_GameIsActive === true ) { jsDisableElement(sID); } } catch(err) { alert("ERROR :: sHangmanCheckLetter(sLetter) :: " + err); } } — user1087448
– user1087448, Commented Dec 8, 2011 at 10:22

w00 · Accepted Answer · 2011-12-08 10:21:55Z

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 .... stackoverflow.com/questions/195951/…

eeerahul · Accepted Answer · 2011-12-08 11:03:07Z

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 8, 2011 at 11:03

eeerahul

1,6254 gold badges27 silver badges41 bronze badges

answered Dec 8, 2011 at 10:29

Ranganadh Paramkusam

4,3882 gold badges24 silver badges33 bronze badges

1 Comment

Manse Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related