JavaScript 限制添加到 DOM 的表单输入的数量

Question

我有一个按钮，可以将用户的表单输入放置到 DOM 上，也可以将其删除。问题是我正在尝试创建允许添加到 DOM 的有限数量的输入。一旦将两个输入放在 DOM 上，我希望禁用 disabledbtn 按钮。

我用过的代码是：

// Restrict Amount Of Inputs On Dom 
   let count;
   for (count = 0; count < 2; count++) {
    disabledbtn.disabled = true;
   };


//I've also attempted an IF Statement:
   // Restrict Amount Of Inputs On Dom 
   let count = 0;
   count += 1;
   if (count.length >= 2) {
    disabledbtn.disabled = true;
   };

这里是完整的代码片段：

// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });
  
// Delete From The Dom.
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
  e.preventDefault();
  // Remove Form Input.
  let h6_e = document.querySelectorAll('.h6_exercise_class');
   // Empty String.
  if (!h6_e.length) {
    return false;
  } else {
    h6_e[h6_e.length - 1].remove();
  };
});

// Add User's Input To The Dom.
const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');
const disabledbtn = document.querySelector('.disabled-exersicebtn');

exerciseForm.addEventListener('submit', (e) => {
e.preventDefault();

  // Get Input Value.
  const value = exerciseForm.querySelector('input[type="text"]').value;

  // Empty String.
  if (value ===  "" || value == null) {
    return false;
  };

  // Create Elements
  const h6_exercise = document.createElement('h5');

  // Add Content
  h6_exercise.textContent = value;

  // Adding Class
  h6_exercise.classList.add('h6_exercise_class');

  // Restrict Number Of Chacracters 
  if(value.length > 15){
    return false;
    };

  // Append To Dom 
  addExerciseDom.appendChild(h6_exercise); 

});

/*------------------ Modals & forms--------------------*/
      .modal{
        border: 0.3rem solid black;
        overflow-y: visible;
      }

      .modal-position{
        margin-top: 50%;
      }
      
      .modal .modal-footer{
        text-align: center;
      }

      label{
          color: #000 !important;  
      }
    
      /* Remove Btn */
      .remove-padding{
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
      }

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title></title>

  <!-- Google icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Sytle.css -->
  <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

  <!----- user's input ------->
  <div class="row">
    <div class="col s12 center valign-wrapper center-align">
      <div class=" exercise-dom delete">
        <!--Users text input h6---->
      </div>
    </div>
  </div>

  <!-- Btn/Modals/form -->
  <div class="row">
    <!-- Dom Btn -->
    <div class="col s12 center ">
      <a href="#exercise" class="disabled-exersicebtn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger ">
        <i class="material-icons white-text">add </i>
      </a>
    </div>
  </div>
  <!-- Modal/form -->
  <div class="modal modal-position" id="exercise">
    <div class="modal-content">
      <div class="row exercises-padding">
        <form class="col s12 exercises-form" autocomplete="off">
          <div class="input-field col s10">
            <i class="material-icons prefix">fitness_center</i>
            <input type="text" id="autocomplete-input" class="autocomplete center">
            <label for="autocomplete-input">
              <h6>Input</h6>
            </label>
          </div>
          <div class="modal-footer">
            <input class="modal-close btn black" type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Remove Users Btn -->
  <div class="col s12 center remove-padding">
    <a href="#" class="del-exercise-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
      <i class="material-icons white-text ">remove </i>
    </a>
  </div>

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- app.JavaScript -->
  <script src="app.js"></script>
</body>

</html>

Answer 1

首先你有 anchor 标签，它没有 disabled 属性.

所以你可以做的是创建一个函数，它将检查添加的练习和 disable/enable 按钮。

再次注意这里禁用CSS

我所做的创建了一个函数，该函数将在添加和删除练习时调用。

如果有 2 个或更多练习，此功能将 add/remove class disabled-anchor

function checkForDisabled() {
   if (document.querySelectorAll('.h6_exercise_class').length >= 2) {
  disabledbtn.classList.add('disabled-anchor');
  } else {
    disabledbtn.classList.remove('disabled-anchor');
  }
}

及以下CSS

.disabled-anchor {
    pointer-events: none;
    opacity: 0.5;
}

// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });
  
// Delete From The Dom.
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
  e.preventDefault();
  // Remove Form Input.
  let h6_e = document.querySelectorAll('.h6_exercise_class');
   // Empty String.
  if (!h6_e.length) {
    return false;
  } else {
    h6_e[h6_e.length - 1].remove();
  };
  checkForDisabled();
});

// Add User's Input To The Dom.
const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');
const disabledbtn = document.querySelector('.disabled-exersicebtn');

exerciseForm.addEventListener('submit', (e) => {
e.preventDefault();

  // Get Input Value.
  const value = exerciseForm.querySelector('input[type="text"]').value;

  // Empty String.
  if (value ===  "" || value == null) {
    return false;
  };

  // Create Elements
  const h6_exercise = document.createElement('h5');

  // Add Content
  h6_exercise.textContent = value;

  // Adding Class
  h6_exercise.classList.add('h6_exercise_class');

  // Restrict Number Of Chacracters 
  if(value.length > 15){
    return false;
    };

  // Append To Dom 
  addExerciseDom.appendChild(h6_exercise);
  checkForDisabled();
 

});

function checkForDisabled() {
   if (document.querySelectorAll('.h6_exercise_class').length >= 2) {
  disabledbtn.classList.add('disabled-anchor');
  } else {
    disabledbtn.classList.remove('disabled-anchor');
  }
}

/*------------------ Modals & forms--------------------*/
      .modal{
        border: 0.3rem solid black;
        overflow-y: visible;
      }

      .modal-position{
        margin-top: 50%;
      }
      
      .modal .modal-footer{
        text-align: center;
      }

      label{
          color: #000 !important;  
      }
    
      /* Remove Btn */
      .remove-padding{
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
      }
      
      .disabled-anchor {
        pointer-events: none;
        opacity: 0.5;
      }

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title></title>

  <!-- Google icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Sytle.css -->
  <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

  <!----- user's input ------->
  <div class="row">
    <div class="col s12 center valign-wrapper center-align">
      <div class=" exercise-dom delete">
        <!--Users text input h6---->
      </div>
    </div>
  </div>

  <!-- Btn/Modals/form -->
  <div class="row">
    <!-- Dom Btn -->
    <div class="col s12 center ">
      <a href="#exercise" class="disabled-exersicebtn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger ">
        <i class="material-icons white-text">add </i>
      </a>
    </div>
  </div>
  <!-- Modal/form -->
  <div class="modal modal-position" id="exercise">
    <div class="modal-content">
      <div class="row exercises-padding">
        <form class="col s12 exercises-form" autocomplete="off">
          <div class="input-field col s10">
            <i class="material-icons prefix">fitness_center</i>
            <input type="text" id="autocomplete-input" class="autocomplete center">
            <label for="autocomplete-input">
              <h6>Input</h6>
            </label>
          </div>
          <div class="modal-footer">
            <input class="modal-close btn black" type="submit" value="Submit">
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Remove Users Btn -->
  <div class="col s12 center remove-padding">
    <a href="#" class="del-exercise-btn btn-floating btn-small darken-4 z-depth-2 black center modal-trigger">
      <i class="material-icons white-text ">remove </i>
    </a>
  </div>

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- app.JavaScript -->
  <script src="app.js"></script>
</body>

</html>

JavaScript 限制添加到 DOM 的表单输入的数量

JavaScript Restrict the amount of form inputs added onto the DOM

html

javascript

for-loop

dom-manipulation

limit