如何将数字变量插入 replaceWith (JavaScript)

Question

问题来了...

我创建了一个 "i" 变量作为计数器并将其设置为 0。我取了一个包含 DOM 元素的变量，并希望将它的值按数字放入 "i"。但是由于 DOM 元素的值是一个字符，我尝试插入一个数值，我得到了一个错误...

知道如何放置 "i" 的值来替换我的元素吗？

我的代码：

compte = document.getElementById("compteurClics");
i = 0;
var boutonElts = document.getElementById("clic");
boutonElts.addEventListener("click", function() {
  console.log("Un clique de plus!");
  i++;
});

compte.replaceWith(i);

stop = document.getElementById("desactiver");
stop.addEventListener("desactiver", function() {
  stop.removeEventListener("click");
});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Compteur de clics</title>
</head>

<body>
  <button id="clic">Cliquez-moi !</button>
  <p>Vous avez cliqué <span id="compteurClics">0</span> fois</p>
  <button id="desactiver">Désactiver le comptage</button>

  <script src="../js/compteurClics.js"></script>
</body>

</html>

Answer 1

replaceWith replaces the entire element with the number, which won't work a second time because the element doesn't exist any more. You can set the element's textContent:

compte = document.getElementById("compteurClics");
i = 0;
var boutonElts = document.getElementById("clic");
boutonElts.addEventListener("click", function() {
  console.log("Un clique de plus!");
  i++;
  compte.textContent = i;
});

stop = document.getElementById("desactiver");
stop.addEventListener("desactiver", function() {
  stop.removeEventListener("click");
});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Compteur de clics</title>
</head>

<body>
  <button id="clic">Cliquez-moi !</button>
  <p>Vous avez cliqué <span id="compteurClics">0</span> fois</p>
  <button id="desactiver">Désactiver le comptage</button>

  <script src="../js/compteurClics.js"></script>
</body>

</html>

您必须在 "click" 事件处理程序中执行此操作，因为 JavaScript 中的数字原语不可变，并且 toString 函数输出的字符串不会自行更新无论如何，尤其是当添加到 DOM.

时

Answer 2

为什么不在事件侦听器函数中使用 innerHTML 属性？

compte = document.getElementById("compteurClics");
i = 0;
var boutonElts = document.getElementById("clic");
boutonElts.addEventListener("click", function() {
 console.log("Un clique de plus!");

    compte.innerHTML = ++i;
});


stop = document.getElementById("desactiver");
stop.addEventListener("desactiver", function() {
 stop.removeEventListener("click");
});

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Compteur de clics</title>
</head>

<body>
    <button id="clic">Cliquez-moi !</button>
    <p>Vous avez cliqué <span id="compteurClics">0</span> fois</p>
    <button id="desactiver">Désactiver le comptage</button>

    <script src="../js/compteurClics.js"></script>
</body>

</html>

Answer 3

我想这就是你想要做的：

var compte = document.getElementById("compteurClics");
var i = 0;

var boutonElts = document.getElementById("clic");

function onClick() {
    console.log("Un clique de plus!");
    i++;
    compte.textContent = i;
}

boutonElts.addEventListener("click", onClick);

// compte.replaceWith(i);

var stop = document.getElementById("desactiver");

stop.addEventListener("click", function() {
    boutonElts.removeEventListener("click", onClick);
});

如何将数字变量插入 replaceWith (JavaScript)

How to insert numeric variable into replaceWith (JavaScript)

javascript

dom

replacewith