Simple Javascript enable/disable button program?

2
votes

I want a simple program that basically enables/disables buttons as each button is pressed. So, there are three buttons. The left button is enabled at the start of the program and I want to disable it and enable the button next to it onclick. The same when I press on the second button.

Can anyone show me where I'm going wrong in my code? 

<html>
<head>
    <button id="func1" onclick="func(1)">func 1</button>
    <button id="func2" disabled="false" onclick="func(2)">func 2</button>
    <button id="func3" disabled="false" onclick="func()">func 3</button>
</head>

<body>
<script>
var number = '';

function func(number)

if(number == '1'){ //Sets button setting to disabled or enabled when wanted 
after particular parts of the program are run.
                document.getElementById('func1').disabled = true;
                document.getElementById('func2').disabled = false;
                document.getElementById('output').disabled = true;
             }

         else if(number == '2'){
            document.getElementById('func1').disabled = true;
            document.getElementById('func2').disabled = true;
            document.getElementById('func3').disabled = false;
         }




</script>
</body>
</html>

Thanks again :)

2
javascriptbutton
Why are your buttons in the <head> and not in <body>? - Botimoo
Are you getting any errors, such as "could not set property 'disabled' of undefined"? - TheJim01
First thing, remove your buttons from <head> and shift them to <body>. Second to set the disabled property use document.getElementById('anyId').setAttribute('disabled', 'disabled'). Disabled attribute takes a string disabled for disabling itself. - Saurabh Tiwari

2 Answers

1
votes

First things first, you need to move the buttons from <head> to <body>.

Now on to the problem at hand: your function was missing the {} brackets around it and your comment was broken into two lines, the second of which was causing a syntax error. Should work now:

<button id="func1" onclick="func(1)">func 1</button>
    <button id="func2" disabled="false" onclick="func(2)">func 2</button>
    <button id="func3" disabled="false" onclick="func()">func 3</button><script>
function func(number){

if(number == '1'){ //Sets button setting to disabled or enabled when wanted after particular parts of the program are run.
                document.getElementById('func1').disabled = true;
                document.getElementById('func2').disabled = false;
                document.getElementById('output').disabled = true;
             }

         else if(number == '2'){
            document.getElementById('func1').disabled = true;
            document.getElementById('func2').disabled = true;
            document.getElementById('func3').disabled = false;
         }

}


</script>
1
votes

I think better to use something universal, like this:

<html>
<body>
    <button class="myButton" onclick="myHandler(this)" >func 1</button>
    <button class="myButton" onclick="myHandler(this)" disabled>func 2</button>
    <button class="myButton" onclick="myHandler(this)" disabled>func 3</button>
    <script>
    function myHandler (e) {
        // Toggle disabled property of current button.
        e.disabled = !e.disabled;
        // Toggle disabled property for next sibling if it has class 'myButton'.
        if (e.nextElementSibling.className === 'myButton') {
            e.nextElementSibling.disabled = !e.nextElementSibling.disabled;
        // Otherwise toggle first button with class 'myButton'.
        } else {
            var b = document.getElementsByClassName('myButton')[0];
            b.disabled = !b.disabled;
        }
    }
    </script>
</body>
</html>