JavaScript 按钮的 function() disabled/enabled

Question

我的 HTML 中有两个按钮：

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

我想在 JavaScript 中编写一个 function() ，当我点击 button1 时，它应该被禁用并将其值更改为 "not clickable" 并且 button2 应该被启用并将其值更改为 "clickable" 反之亦然。

我写了两个函数，但它们都不正确，而且我对 JavaScript 还很陌生。这是我的功能（）：

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

Answer 1

您的函数名称有问题：html 中的 switchButton() 和 js 中的 switcher，id 也不同并且 enabled 不是 html 属性.只需一个功能就可以实现你想要的:

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>

Answer 2

你应该尽量避免这种重复的相同逻辑，很难维护，我建议你改用这个：

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>

JavaScript 按钮的 function() disabled/enabled

JavaScript function() for buttons disabled/enabled

javascript

function

button

disabled-input