Счетчик элементов DOM javascript - PullRequest
Новая
       7

Счетчик элементов DOM javascript

0 голосов
/ 28 февраля 2019

введите описание изображения здесь У меня есть кнопка, позволяющая динамически добавлять элемент флажка, 

function addCheck() {
    var checkinput = document.createElement('input')

    var form = document.getElementById('form')

    check.setAttribute('type', 'checkbox')
    check.setAttribute('name', 'check')

    form.appendChild(checkinput)
}

Я хочу подсчитать, сколько пользователь создал новый элемент всякий раз, когда он нажимаеткнопка 

    var count=0;
    function addCheck() {

      let pos= document.getElementById("dynamic-checkbox");

 var checkinput = document.createElement("input");

  check.setAttribute("type", "checkbox");

  check.setAttribute("name", "rep");
    pos.appendChild(check);
    count++;

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Просто добавьте счетчик и увеличивайте его по нажатию кнопки.При настройке атрибута вы использовали имя переменной, в которой элемент хранится как check, но это должен быть checkinput 

var count = 0;
var total=0;

function addCheck() {
  var checkinput = document.createElement('input')

  var form = document.getElementById('form')

  checkinput.setAttribute('type', 'checkbox')
  checkinput.setAttribute('name', 'check')

  form.appendChild(checkinput)
  count++;
  total=count+2;
  console.log('Number of checkboxes created by the user:' + count)
  console.log(  'Total checkboxes in the form:' + total)
}
<button onclick="addCheck()">click</button>
<form id="form">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
</form>
0 голосов
/ 28 февраля 2019

Вот альтернатива использованию переменной счетчика или проверки длины количества существующих элементов в DOM.Сначала вы устанавливаете элемент счетчика с textContent, установленным в ноль, а затем при каждом вызове функции устанавливаете это содержимое в любое текущее содержимое (приведенное от строки к числу) плюс 1. 

// Cache the elements we reuse
const form = document.querySelector('form');
const button = document.querySelector('button');
const counter = document.querySelector('#counter');

button.addEventListener('click', addCheck, false);

function addCheck() {
  const checkinput = document.createElement('input');
  checkinput.setAttribute('type', 'checkbox');
  checkinput.setAttribute('name', 'check');
  form.appendChild(checkinput);
  counter.textContent = Number(counter.textContent) + 1;
}
<div id="counter">0</div>
<button>Add checkbox</button>
<form></form>
0 голосов
/ 28 февраля 2019

Вы можете использовать querySelectorAll(), передавая тип входа в качестве селектора и беря длину: 

var count = form.querySelectorAll('input[type=checkbox]').length;


var form= document.getElementById("form");
function addCheck() {   
  var checkinput = document.createElement("input");

  checkinput.setAttribute("type", "checkbox");
  checkinput.setAttribute("name", "check");

  form.appendChild(checkinput); 
  var count = form.querySelectorAll('input[type=checkbox]').length;
  console.log('Total Checkbox: ' +count);
}
<form id="form"></form>

<button type="btn" onclick="addCheck()">Add</button>

Вы также можете поддерживать переменную в качестве счетчика: 

var form= document.getElementById("form");
var count = 0;
function addCheck() {   
  
  var checkinput = document.createElement("input");

  checkinput.setAttribute("type", "checkbox");
  checkinput.setAttribute("name", "check");

  form.appendChild(checkinput); 
  count++;
  console.log('Total Checkbox: ' +count);
}
<form id="form"></form>

<button type="btn" onclick="addCheck()">Add</button>
...