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

问题描述 投票：0回答：1

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

[当前，我尝试了FOR语句以及if语句以在DOM中放置一定量的输入后禁用按钮，但是显然我忽略了一个简单的概念。我使用的代码是：

// 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>
javascript html for-loop limit dom-manipulation
1个回答
1
投票

首先，您具有anchor标签，但没有disabled属性。

因此，您可以做的是创建一个函数，该函数将检查是否添加了练习，并禁用/启用按钮。

再次注意，此处通过CSS禁用

我所做的创建了一个在添加和删除运动时将被调用的函数。

如果有两个或更多练习，此功能将添加/删除类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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.