点击三次后禁用按钮？

Question

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

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

我如何处理这个问题？我的想法是，我必须以某种方式计算按钮被点击了多少次，然后发送一个警告说 "你不能再点击我了"。我希望是这样的。

Answer 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>

Answer 2

在javascript中，你必须初始化一个全局变量，例如var count = 0。

当你点击按钮时，调用一个Javascript方法，例如

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

注意：当你要删除一条记录的时候，请确保你的count值减少了1 ( --count;)。

Answer 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);
    }
}