Question

enter image description here我有一个按钮，可以动态添加复选框元素，

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++;

Answer 1

您可以通过将输入类型作为选择器并使用长度来使用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>

Answer 2

只需添加一个计数器，然后在单击按钮时将其递增即可。在设置属性时，您已经使用了将元素存储为check的变量的名称，但是应该将其输入为checkinput

$sql = "INSERT INTO urls_unis (tag_name, tag_link, user_data)
    VALUES
        (?, ?, ?)
    ON DUPLICATE KEY UPDATE
        tag_name = ?,
        tag_link = ?,
        user_data = ?;";

$stmt = $link->prepare($sql);
$stmt->bind_param("ssssss", $tag_value, $tag_link, $user_value, 
                            $tag_value, $tag_link, $user_value);
if ($stmt->execute()){
    echo "Records inserted successfully.";
} else{
    echo "ERROR: Could not able to execute $sql<br />";
    echo $stmt->error;
}
$stmt->close();

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

Answer 3

这是使用计数器变量或检查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>

javascript DOM元素计数器

3 个答案: