Javascript计数器变量未显示正确的值

我有一个全局计数器变量，当我在HTML中调用它时，我没有得到更新的值。我只得到实例化的值。 当我叫它时，我总是得到1。我需要它来显示2，3，4等等

  <script type="text/javascript">
    var counter = 1;
    function moreFields() {
      counter++;
      var newFields = document.getElementById('readroot').cloneNode(true);
      newFields.id = '';
      newFields.style.display = 'block';
      var newField = newFields.childNodes;
      for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
          newField[i].name = theName + counter;
      }
  </script>
</fieldset>
<span id="writeroot"></span>
<fieldset id="readroot" style="display: none">
  <legend>Options For FieldSet # <script> document.write(counter.value);</script></legend>
</fieldset>

var计数器=1；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
正如Brad Christie所评论的（var i=0；i），
document.write（counter.value）；
只发生一次，并且在调用函数
moreFields（）
之前发生

相反，我建议在
legend
标记中创建一个span（或者基本上是任何html元素）

例如：

<legend>Options For FieldSet # <span id="counterDisplay"></span></legend>

最后，您可以像这样重写代码块：

<script type="text/javascript">
    var counter = 1;
    document.getElementById("counterDisplay").innerHTML = counter;
    function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=0;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
        }
        document.getElementById("counterDisplay").innerHTML = counter;
    }
</script>
<span id="writeroot"></span>
<fieldset id="readroot" style="display: none">
    <legend>Options For FieldSet # <span id="counterDisplay"></span></legend>
</fieldset>


var计数器=1；
document.getElementById（“计数器显示”）.innerHTML=计数器；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（var i=0；i为什么您希望计数器不断增加？仅在编辑中，我就看到语法错误（在关闭
之前缺少
}
）。我有一个调用moreFields（）的代码。因此计数器应该增加。如果我写函数，它确实会增加，但是在图例中的html调用中，我需要它来显示当前计数器。我总是得到1如果你没有提供所有代码，你将无法得到准确的答案。但是，从听上去，你是在函数运行之前写出计数器的调用，并且由于它与任何更新无关，因此它永远不会随着
计数器的更改而更改。我在字段集顶部有一个按钮，用于调用moreFields（）函数。计数器在被调用时会被更新，如果我在函数中写入，则会得到2、3、4等。我只需要在html端获得相同的值
，这就是我在图例标记中创建一个div并调用document.getElementById（“计数器显示”）所显示的内容.innerHTML=counter；来更新显示的值。不过最好使用span而不是div，并设置
newFields.style.display=''；
而不是
'block'
。是的，我听到了。我只是尝试稍微修改代码来回答所问的问题。上面的代码不起作用。当我单击addMoreFields”按钮。
function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    document.getElementById("counterDisplay").innerHTML = counter;
}

<script type="text/javascript">
    var counter = 1;
    document.getElementById("counterDisplay").innerHTML = counter;
    function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=0;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
        }
        document.getElementById("counterDisplay").innerHTML = counter;
    }
</script>
<span id="writeroot"></span>
<fieldset id="readroot" style="display: none">
    <legend>Options For FieldSet # <span id="counterDisplay"></span></legend>
</fieldset>