Javascript按钮禁用然后立即启用[重复]答案

【问题标题】：Javascript buttons disables then instantly enables [duplicate]Javascript按钮禁用然后立即启用[重复]
【发布时间】：2019-10-26 14:36:33
【问题描述】：

对于有知识的人来说，这应该是一件容易的事。

我已经开始研究 Javascript，并考虑开发一些表单，例如添加按钮并触发不同的功能。

我发现的是，如果您在两种不同的表单上有 onclick 事件，它们似乎可以工作，然后自行重置，例如在一个表单上，我有一个按钮，它将禁用另一个表单上的另一个按钮。但是该按钮会被禁用然后立即启用。

如果我将禁用按钮从表单上移开，那么该功能将按预期工作。

那么，我应该编写什么代码，以便一个表单上的按钮会禁用另一个表单上的另一个按钮，而不会立即启用该按钮？

非常感谢您的宝贵时间！

当您知道“如何”时，这一点很明显。如果您知道“如何”传递它。

...html

<body>
    <form class="form1" id="form1">
        <input type="button" id="btn01" value="OK">
        <p>From One!</p>
        <p id="p01">I am different.</p>
        <br/>
    </form>
    <br/>
    <form class="form2" id="form2">
        <br/>
        <!-- When the disable button is clicked the OK button gets disabled off
        but instanlty gets enabled again -->
        <button onclick="disableElement()">Disabled</button>
        <button onclick="enableElement()">Enable</button>
        <p>Click to disable the 'OK' button</p>
    </form>

    <!-- This works -->
    <button onclick="disableElement()">Disabled</button>
    <button onclick="enableElement()">Enable</button>
</body>

...

...Javascript //data.js

var onOff = false;

function disableElement() {
    if (onOff == false) {
        console.log("switched off")
        document.getElementById("btn01").disabled = true;
        onOff = true;
    }
}

function enableElement() {
    if (onOff == true) {
        console.log("enabled")
        document.getElementById("btn01").disabled = false;
        onOff = false;
    }
}

...

...css /* 数据.css */

#form1 {
    width: 500px;
    height: 250px;
    background-color: #b94813;
    border-left: 10px solid #000;
    border-right: 10px solid rgb(211, 17, 17);
}

#form2 {
    width: 500px;
    height: 250px;
    background-color: #8955cc;
    border-left: 10px solid #000;
    border-right: 10px solid rgb(211, 17, 17);
    ;
}

#p01 {
    color: blue;
}

...

【问题讨论】：

提交按钮提交。
...表示表单中没有指定类型的按钮默认为提交按钮。

标签： javascript

【解决方案1】：

答案很简单。您省略了指定按钮的type，因此它们获得了它们的默认类型，即submit。因此，单击您的按钮首先会执行您的 onclick Javascript，然后立即提交您的表单，这会使页面重新加载并将您的 Javascript 状态重置为新加载页面的状态。

只需将按钮类型设置为button：

<button onclick="disableElement()" type="button">Disabled</button>
<button onclick="enableElement()" type="button">Enable</button>

【讨论】：

不错的一个，成功了。干杯