入力ファイルの値を変更します（ない仕事）

怠けるへ：

私は、ユーザーがボタンをクリックすると新しいのdivブロックを作成する小さなスクリプトを持っています。私は隠された入力を持って作成されたどのように多くカウントします。毎回新しいブロックが、この隠された入力の値が更新されます必要があります作成されます。

私のスクリプトザッツ：

$(function () {
    $("#addBtn3").on("click", function () {
        imageBlockCount++;
        document.getElementById("counter").value = imageBlockCount;

        $(
            $.parseHTML(
                `<div class="form-group" id="gallery-${imageBlockCount}" >
                <label for="new-content-${imageBlockCount}">New Content</label>
                    <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
            </div>`
            )
        ).appendTo("#newElements");
    });
});

これは私のhtmlコードです：

<div style="flex:auto;text-align:right;">
    <button id="addBtn3" type="button">Content +</button> 
</div>

<input name="counter" type="text" id="counter" value="0" hidden>

<div id="newElements">
</div>

しかし、それは値を更新する必要があり、スクリプトではない仕事をするが、私はとても異なっている任意の他の方法を見つけていない理由は、わかりません。

Ashkan：

あなたのコードは正常に動作します。場所console.log($("#counter").val())後appendTo。

入力フィールドの値が変化したときにWebページのHTMLが自動的に更新されません。

あなたはこのような機能が必要な場合は、値を更新した後にこれを置くことができます#counter。

$('#counter').attr('value', $('#counter').val());

$(function () {
  let imageBlockCount = 0
  $("#addBtn3").on("click", function () {
    imageBlockCount++;
    document.getElementById("counter").value = imageBlockCount;
    $('#counter').attr('value', $('#counter').val());
    $(
      $.parseHTML(
        `<div class="form-group" id="gallery-${imageBlockCount}"               <label for="new-content-${imageBlockCount}">New Content</label>
          <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
        </div>`
      )
    ).appendTo("#newElements");
    console.log($('#counter').val())
  });
});

<div style="flex:auto;text-align:right;">
  <button id="addBtn3" type="button">Content +</button> 
</div>
  
<input name="counter" type="text" id="counter" value="0" hidden>
  
<div id="newElements">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

入力ファイルの値を変更します（ない仕事）

おすすめ