单击三下后禁用按钮？答案

【问题标题】：Disable a button after three clicks?单击三下后禁用按钮？
【发布时间】：2020-06-15 18:43:19
【问题描述】：

我有一个添加新行的按钮，但我希望它在添加三个新行后停止。

<td>
    <input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
</td>

我将如何解决这个问题？我的想法是我必须以某种方式计算按钮被点击的次数，然后发送警报说“你不能再点击我了”。我希望是这样的吗？

【问题讨论】：

您能否发布您已经尝试过的 Javascript 代码，以及您遇到的问题？
@Tom 你试过了吗？ stackoverflow.com/questions/6480060/…

标签： javascript html button

【解决方案1】：

    <td>
        <input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
    </td>
<script>
    var btnCount = 0;
    function addRow() {
        btnCount++;
        if(btnCount > 3) {
            alert("You can't click me anymore");
            return;
        }
    }
</script>

【讨论】：

【解决方案2】：

例如，在 javascript 中，您必须初始化一个全局变量变量计数 = 0;

例如，当您单击按钮调用 Javascript 方法时

function checkRowCount(){
  if(count > 2){
    alert("Count is exceeded");
  }else{
    ++count;
  }
}

注意：当您要删除一行时，请确保您将计数值减少 1 (--count;)

【讨论】：

【解决方案3】：

您可以使用 localstorage 检查添加了多少行，然后采取相应措施。

localStorage.setItem('rows-added', 0);
const addRow = () => {
    let current_rows_added = localStorage.getItem('rows-added');
    if (localStorage.getItem('rows-added') == 3){
        alert("you have already added 3 rows")
    }else{
        // your code that adds the row
        localStorage.setItem('rows-added', current_rows_added + 1);
    }
}

【讨论】：