从计数器添加数字，但也使用新计数器创建新按钮答案

【问题标题】：adding numbers from a counter but also creating new buttons with new counters从计数器添加数字，但也使用新计数器创建新按钮
【发布时间】：2020-04-03 15:48:10
【问题描述】：

我想要做的是......当点击计数器按钮时......增加一个跨度以查看它被点击了多少次，但也创建一个带有自己的增量器的新计数器

我有点工作，但是当我创建一个新按钮时......计数器不起作用

有人帮我解决我缺少的东西吗？

这也可以在 vanilla js 和 html 中完成

模板：

<div class="container">
  <button type="button" id="increase" onClick="increaseCounter()">click</button>
  <span id="amount"></span>
</div>

JS：

var counter = 0

function increaseCounter() {

  let button = document.getElementById("increase");
  let span = document.getElementById("amount");

  counter += 1;

  span.innerHTML = counter;

  createNewButton();
}

function createNewButton() {
  let container = document.getElementsByClassName("container")[0];
  let btn = document.createElement("button");
  btn.innerHTML = "new button";
  btn.id = "increase";
  container.appendChild(btn);

  let span = document.createElement("span");
  span.innerHTML = 0;
  span.id = "amount";

  container.appendChild(span);
}

链接：https://codepen.io/zomdar/pen/ZEGPxNP?editors=1011

【问题讨论】：

标签： javascript html counter

【解决方案1】：

以下是您应该寻找的一些东西：

1- 事件侦听器仅受您分配的第一个按钮的影响，因为它是内联事件侦听器。所以新按钮不会有事件监听器。

2- 如果你想拥有一个包含每个人数量的新跨度，你必须为每个跨度设置不同的 ID（或者像我一样直接设置 innerHTML），否则它将是相同的跨度更改。

注意 - ID 属性在页面中应该是唯一的，每次创建按钮时都会赋予相同的 ID。您应该每次都使用类属性（非唯一值）或不同的 ID（例如"amount"+counter）

function increaseCounter() {

  let button = document.getElementById("increase");
  let span = document.getElementById("amount");

  counter += 1;

//   span.innerHTML = counter;

  createNewButton();
}

function createNewButton() {
  let container = document.getElementsByClassName("container")[0];
  let btn = document.createElement("button");
  btn.innerHTML = "new button";
  btn.id = "increase"; // UNIQUE ID !!!
  btn.onclick = increaseCounter;
  container.appendChild(btn);

  let span = document.createElement("span");
  span.innerHTML = counter;
  span.id = "amount";

  container.appendChild(span);
}

【讨论】：

这行得通....但我想让每个计数器保持私有并将它们加起来....如何继续添加到当前作用域计数器？
您可以通过将计数器值传递给您的函数来做到这一点：createNewButton(counter)。但是，您的计数器在全局范围内可用，请将let 定义在本地范围内。如果解决了，可以标记为so。

【解决方案2】：

您可以将被点击的元素作为 increaseCounter 函数的参数传递，然后获取该元素的 nextElementSibling（与其关联的跨度），获取它的 innerHTML（当前计数），然后将其递增 1。这将防止您必须通过 id 获取元素（如 clota974 的回答中所述，您希望您的 id 是唯一的）。您还没有为正在创建的按钮添加 onclick 功能。

参考资料：

https://www.w3schools.com/jsref/prop_element_nextelementsibling.asp https://www.w3schools.com/jsref/event_onclick.asp

示例代码如下：

function increaseCounter(el) {
  /* increment the span associated with this button (nextElementSibling is the span) */
  el.nextElementSibling.innerHTML = parseInt(el.nextElementSibling.innerHTML) + 1;
  createNewButton();
}

function createNewButton() {
  let container = document.getElementsByClassName("container")[0];
  let btn = document.createElement("button");
  btn.innerHTML = "new button";
  btn.onclick = function() {
    increaseCounter(this);
  };
  container.appendChild(btn);

  let span = document.createElement("span");
  span.innerHTML = 0;

  container.appendChild(span);
}

<div class="container">
  <button type="button" onClick="increaseCounter(this)">click</button>
  <span>0</span>
</div>

【讨论】：