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

时间:2018-04-20 16:10:24

标签: javascript dom replacewith

这是问题......

我创建了一个“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>

3 个答案:

答案 0 :(得分:1)

replaceWith用数字替换整个元素,这将不再有效,因为该元素不再存在。您可以设置元素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。

答案 1 :(得分:0)

为什么不在事件监听器函数中使用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>
<?php

if ( isset($_POST['downloadButton'] )) {

    $filename = ( isset($_POST["filename"]) ?
    $_POST["filename"] : null );


   if ( file_exists( $filename )) {

        header("Content-Type: application/octet-stream");
        header("Content-Disposition: attachment; filename=filename here");
        header("Content-Length: " . filesize( $filename) );
        header("Cache-Control: must-revalidate");
        readfile( $filename );
        exit;
     }
  }
?>

答案 2 :(得分:0)

我想这就是你想要做的事情:

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