CODEWITHSUNDEEP
javascripthtmlbutton
user3217574
user3217574

Reputation: 19

How to Enable and Disable Buttons

I have 4 buttons. Once on the page, I only want button 1 to show. Once button 1 has been clicked, it disappears and only button 2 is visible. Once button 2 has been clicked, it disappears and only button 3 shows. The same thing happens for button 5. Any help would be appreciated.

<html>
<script>
    function enableButton2() {
        document.getElementById("button2").disabled = false;
    }
function enableButton3() {
        document.getElementById("button3").disabled = false;
    }
function enableButton4() {
        document.getElementById("button4").disabled = false;
    }
function enableButton5() {
        document.getElementById("button5").disabled = false;
    }
</script>
</head>
<body>
    <input type="button" id="button1" value="button 1" onclick="enableButton2()"                  
    onclick="hidden" />
<input type="button" id="button2" value="button 2" disabled onclick="enableButton3()"   
    onclick="hidden" />
<input type="button" id="button3" value="button 3" disabled 
    onclick="enableButton4()" onclick="hidden"  />
<input type="button" id="button4" value="button 4" disabled onclick="enableButton5()" 
    onclick="hidden" />

Upvotes: 0

Views: 491

Answers (1)

Barmar
Barmar

Reputation: 780714

There's no need for a different function for each button. Make the ID of the next button a parameter of a single function. And to hide the first button, you need to set its display style, so pass this as another argument.

HTML:

<input type="button" id="button1" value="button 1" onclick="enableButton(this, 'button2')" />
<input type="button" id="button2" value="button 2" disabled onclick="enableButton(this, 'button3')" />
<input type="button" id="button3" value="button 3" disabled onclick="enableButton(this, 'button4')" />
...

JS:

function enableButton(thisButton, nextButton) {
    thisButton.style.display = "none";
    document.getElementById(nextButton).disabled = false;
}

Upvotes: 3

Related Questions