JavaScript function() for buttons disabled/enabled

Question

I have two buttons in my HTML:

<form>
<input type="button"  id="button1" value="Clickable" onClick="switchButton()">
<input type="button"  id="button2" value="Not Clickable" onClick="switchButton2()" disabled="true">
</form>

I want to write a function() in JavaScript for when I click on button1 it should be disabled and change it's value to "not clickable" and button2 should be enabled and change it's value to "clickable" and the other way around.

I have written two functions but they aren't correct and I am very new to JavaScript. This is my functions():

function switcher() {
var btn = document.getElementById("knapp1");
btn.disabled = true;
}
function switcher2(){
var btn2 = document.getElementById("knapp2");
btn2.enabled = true;
}

There is no enabled property. And you might wanna switch vice-versa, just as you said — Jonas Wilms
– Jonas Wilms, Commented Mar 31, 2018 at 14:15
Possible duplicate of Disabling and enabling a html input button — bugs
– bugs, Commented Mar 31, 2018 at 14:22

Nico_ · Accepted Answer · 2018-03-31 14:29:42Z

2

You have a problem with the name of your function : switchButton() in your html and switcher in your js, the id are different too and enabled is not an html property. You can achieve what you want with only one function :

function switchButton(btn1, btn2) {
    var btn1 = document.getElementById("button"+btn1);
    var btn2 = document.getElementById("button"+btn2);
    btn1.disabled = true;
    btn1.value = "not clickable";
    btn2.disabled = false;
    btn2.value = "clickable";
}

<form>
<input type="button" id="button1" value="Clickable" onClick="switchButton(1,2)">
<input type="button" id="button2" value="Not Clickable" onClick="switchButton(2,1)" disabled="true">
</form>

answered Mar 31, 2018 at 14:29

Nico_

1,39617 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miguel Angel · Accepted Answer · 2018-03-31 14:39:33Z

2

You should try to avoid have this duplicate logic that make the same, is very hard to maintain, I recommend to you instead use this:

function clickButton(e) {
  const currentBtn = document.getElementById(e);
  const otherBtn = document.getElementById(e === "knapp2"? "knapp1": "knapp2");
 
  currentBtn.disabled = true;
  otherBtn.disabled = false;
  currentBtn.value="Not Clickable"
  otherBtn.value="Clickable"
}

<form>
<input type="button"  id="knapp1" value="Clickable" onClick="clickButton('knapp1')">
<input type="button"  id="knapp2" value="Not Clickable" onClick="clickButton('knapp2')" disabled>
</form>

answered Mar 31, 2018 at 14:39

Miguel Angel

9838 silver badges20 bronze badges

Collectives™ on Stack Overflow

JavaScript function() for buttons disabled/enabled

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related