在范围 JavaScript 中添加数字

Question

我的页面上有一个按钮，点击计数器作为跨度（class .counter）。单击按钮后，应将 +1 添加到计数器（在页面上，而不是在控制台中）。如何将 1 加到 span 中的字符串，当前 innerHTML 为 0？我尝试使用下面的代码，但不幸的是它不起作用。当我在没有 parseInt 的情况下尝试时，数字被添加到一个跨度中，所以我得到了例如011 而不是 2。

document.addEventListener("DOMContentLoaded", function () {
    var counters = document.querySelectorAll(".counter");

    var btn1 = document.getElementById("button1");

    function btn1Count (event) {
         parseInt(counters[0].innerHTML,10) += 1;
     }

    btn1.addEventListener("click", btn1Count);

});

Answer 1

使用 parseInt 但喜欢 :

counters[0].innerHTML = parseInt(counters[0].innerHTML,10) + 1;

注意： 如果您只想附加文本（否 html），最好使用 textContent ：

counters[0].textContent = parseInt(counters[0].textContent,10) + 1;

希望对您有所帮助。

var btn1 = document.getElementById("button1");
var counters = document.querySelectorAll(".counter");

btn1.addEventListener("click", btn1Count);

function btn1Count (event) {
  counters[0].textContent = parseInt(counters[0].textContent) + 1;
}

<button id="button1">Button 1</button>
<br>
<span class='counter'>0</span>

Answer 2

改变一下

counters[0].innerHTML = parseInt(counters[0].innerHTML,10) + 1;

你只是没有设置 span 内容

在范围 JavaScript 中添加数字

Adding numbers in span JavaScript

html

javascript

events

parseint