При нажатии кнопки появляется новая кнопка с собственным счетчиком. - PullRequest
0 голосов
/ 27 мая 2020

У меня есть этот код, который создает новую кнопку при каждом нажатии со счетчиком.

Однако мне нужен счетчик для отдельных кнопок. Как изменить мой код, чтобы у каждой кнопки был свой счетчик.

var clicks = 0;

function clickME() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;

  var btn = document.createElement("BUTTON");
  var t = document.createTextNode(clicks);

  btn.onclick = clickME;

  btn.appendChild(t);
  document.body.appendChild(btn);
}
<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

Ответы [ 4 ]

0 голосов
/ 27 мая 2020

Сделать это можно так:

var clicks = 0;

function clickME() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
  let buttons = document.getElementsByClassName("button").length;
  var btn = document.createElement("BUTTON");
  var t = document.createTextNode(buttons + 1);

  btn.setAttribute("id", buttons + 1);
  btn.setAttribute("class", "button");
  btn.appendChild(t);
  document.body.appendChild(btn);
  var p = "Clicks for button " + (buttons + 1) + ": <a id='clicks_" + (buttons + 1) + "'>0</a>";
  document.body.insertAdjacentHTML("beforeend", p);
}

function clickButton(element) {
  let id = element.id;
  let buttonClicks = document.getElementById(id).getAttribute("data-count");
}
document.addEventListener('click', function(e) {
  if (e.target && e.target.getAttribute("class") == 'button') {
    let id = e.target.id;
    let buttonClicks = document.getElementById("clicks_" + id).textContent;
    buttonClicks = parseInt(buttonClicks) + 1;
    document.getElementById("clicks_" + id).textContent = buttonClicks;
    let buttons = document.getElementsByClassName("button").length;
    var btn = document.createElement("BUTTON");
    var t = document.createTextNode(buttons + 1);

    btn.setAttribute("id", buttons + 1);
    btn.setAttribute("class", "button");
    btn.appendChild(t);
    document.body.appendChild(btn);
    
    var p = "Clicks for button " + (buttons + 1) + ": <a id='clicks_" + (buttons + 1) + "'>0</a>";
    document.body.insertAdjacentHTML("beforeend", p);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
0 голосов
/ 27 мая 2020

Передайте идентификатор контейнера счетчика в прослушиватель, получите счетчик и увеличьте его. Не добавляйте кнопку в теле, а добавляйте в родительский узел контейнера счетчика.

function clickME(click) {
  var clicks=parseInt(document.getElementById(click).innerHTML);
  clicks += 1;
  document.getElementById(click).innerHTML = clicks;

  var btn = document.createElement("BUTTON");
  var t = document.createTextNode(clicks);

  btn.onclick = clickME;

  btn.appendChild(t);
 document.getElementById(click).parentNode.appendChild(btn);
}
<button type="button" onClick="clickME('clicks')">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

<button type="button" onClick="clickME('clicks1')">Click me</button>
<p>Clicks: <a id="clicks1">0</a></p>
0 голосов
/ 27 мая 2020

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

var clicks = 0;

function clickME() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;

  var btn = document.createElement("BUTTON");
  var t = document.createTextNode('0');

  

  btn.appendChild(t);
  
  btn.onclick = function() {
    btn.textContent = (+btn.innerHTML) + 1;
  };
  
  document.body.appendChild(btn);
}
<button type="button" onClick="clickME()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

В случае, если вы хотите добавить весь компонент с <p> в качестве счетчика, обратите внимание, что я удаляю компонент и добавляю кнопку, после нажатия на которую он будет генерировать новый контейнерный div вместе с тегом counter <button> и <p>, который содержит значение счетчика:

function clickME() {
  var container = document.createElement("div");
  var btn = document.createElement("button");
  var btnText = document.createTextNode('Click me');
  btn.appendChild(btnText);
  
  var pTag = document.createElement("p");

  pTag.innerHTML = 'Clicks: ';
  var aTag = document.createElement("a");

  aTag.textContent = '0';
  pTag.appendChild(aTag);
  
  btn.onclick = function() {
    aTag.innerHTML = (+aTag.innerHTML) + 1;
  };
  
  container.appendChild(btn);
  container.appendChild(pTag);
  
  document.body.appendChild(container);
}
<button id="add-counter" onclick="clickME()">add counter</button>
0 голосов
/ 27 мая 2020

Поместите вашу функцию в класс и обработайте каждый экземпляр отдельно. По умолчанию вам будут предложены отдельные объекты для обработки отдельных счетчиков.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...