Activate button style with Javascript

Question

Here's the code

I want to activate a new button style

if (visited.length == 3) {
    **HERE**
    alert('You have reached the maximum rank 1 questions');
    return;

Basically, I want the button to grey out when visited.length == 3. How can I do this? I've already created the style, but I do not know CSS (yet) so I'm guessing I'm not naming it right.

.button:maxques {
    padding:4px 39px;
    border:solid 3px #ffffff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:23px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#ababab;
    background-color:#ededed;
    background-image: -moz-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -webkit-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -o-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -ms-linear-gradient(top, #ededed 0%, #81898c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81898c', endColorstr='#81898c', GradientType=0);
    background-image: linear-gradient(top, #ededed 0%, #81898c 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}

Answer 1

将**HERE**替换为：

document.getElementById('your_button_id').className = 'button';

Answer 2

Replace button2 with the css of your new button

if (visited.length == 3) {
    document.getElementById('btn').className = 'button2';
    alert('You have reached the maximum rank 1 questions');
    return;
}

Answer 3

I would try something along these lines, though you'll need to adjust your CSS as the hover attribute still gets applied.

if (visited.length == 3) {
    if(this.className.indexOf("disabled") < 0) { // disabled hasn't been applied yet
       this.className += " disabled-button";
    } 
    alert('You have reached the maximum rank 1 questions');
    return;
}

Also, I wouldn't add a custom psuedo-class like you are doing. In the above example, I changed your button:maxques to .disabled-button .

Here is a JsFiddle with a working CSS style and js approach. http://jsfiddle.net/xDaevax/pnP4D/18/

Answer 4

If you want to disable the button entirely,

if(visited.length==3) buttonObj.disabled = "true"

If you want to just have it become grey (assuming your CSS above is what you want for it to become) then I suggest

CSS

button.maxques {
    padding:4px 39px;
    border:solid 3px #ffffff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:23px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#ababab;
    background-color:#ededed;
    background-image: -moz-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -webkit-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -o-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -ms-linear-gradient(top, #ededed 0%, #81898c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81898c', endColorstr='#81898c', GradientType=0);
    background-image: linear-gradient(top, #ededed 0%, #81898c 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}

JavaScript

buttonObj = document.getElementById("button");
if(visited.length==3) {
  buttonObj.className = (buttonObj.className!=null||buttonObj.className!=undefined) buttonObj.className + " maxques" : "maxques";
}

Answer 5

buttonID = document.getElementById("btn");

    if(visited.length==3) 
      buttonID.css( "color", "grey" );

for your refrence or

buttonID = document.getElementById("btn");

if(visited.length==3) 
 buttonID.addClass( "myClass yourClass" )

for your refrence