javascript - 如何在vanilla js中点击x次后禁用输入？

Question

我有一个输入按钮，每次单击它都会生成一个新表单，但我很难在单击 10 次后禁用它，因为我不希望用户能够创建无限数量的表单。这是:

var room = 1;
function add_fields() {
  room++;
  var objTo = document.getElementById("room_fileds");
  var divtest = document.createElement("div");
  divtest.innerHTML =
    '<div class="control-group">' +
    '<label class="control-label">Company</label>' +
    '<div class="controls">' +
    '<input class="input-border collection-input "id="company" name="company' +
    room +
    ' "type="text" placeholder="Company">' +
    "</div>" +
    "</div>" 

  objTo.appendChild(divtest);
}

<div id="room_fileds">
  <div class='label'>Drop off address:</div>
</div>
<input type="button" id="more_fields" class="btn mt-3 mb-2" onclick="add_fields();" value="Add More" />

这是我尝试过的:

var room = 1;
function add_fields() {
 if(room < 11){
   room++
 }
  var objTo = document.getElementById("room_fileds");
  var divtest = document.createElement("div");
  divtest.innerHTML =
    '<div class="control-group">' +
    '<label class="control-label">Company</label>' +
    '<div class="controls">' +
    '<input class="input-border collection-input "id="company" name="company' +
    room +
    ' "type="text" placeholder="Company">' +
    "</div>" +
    "</div>" 

  objTo.appendChild(divtest);
}

Answer 1

将 if 语句包裹在整个函数中，它应该按您的预期工作。

var room = 1
function add_fields() {
  if (room < 11) {
    room++

    var objTo = document.getElementById("room_fileds")
    var divtest = document.createElement("div")
    divtest.innerHTML =
      '<div class="control-group">' +
      '<label class="control-label">Company</label>' +
      '<div class="controls">' +
      '<input class="input-border collection-input "id="company" name="company' +
      room +
      ' "type="text" placeholder="Company">' +
      "</div>" +
      "</div>"

    objTo.appendChild(divtest)
  }
}