javascriptで最後のid要素を取得したい

Question

前提・実現したいこと

javascriptのdocument.getElementByIdで
最後のid要素を取得したい。

発生している問題・エラーメッセージ

現在jstlのでtableの総数(行数)を動的に表示しています。

jstl内のForEachの一番下の部分に
<input type="hidden" id="count" value="${status.count}">
を仕込んでjavascriptでcountの総数を取得するという処理を書いております。

しかし、次のコードでは1のみ(最初の要素)が表示されてしまいます。

該当のソースコード

var num = document.getElementById('count').value;
console.log(num);

最後の要素を取得する方法、ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

HTMLの文法上 id 要素は一意的にすることになっていますので、同じIDが複数あると文法エラーこそ出ないものの、バグが起きます。

Answer 1

いちおう動くと思いますが、よくないコードだと思いますので、classで書くことを再検討してください。

var num = document.querySelectorAll('[id=count]');
console.log(num[num.length-1].value);

Comments

[ataru2222]

解答して頂きありがとうございます。

ちなみにclassだとcount仕込んで取得しても大丈夫なのでしょうか？
そもそも行の総数をjavascriptに送るのはどのように書くのが一番良いのでしょうか？

[Lhankor_Mhy]

回答と同じやり方でできますよ。

Answer 2

const node=[...document.querySelectorAll('[id]')].splice(-1);
console.log(node);

Comments

[yambejp]

あー、id=countが複数ある設定なのですか・・・
それは無理です

[ataru2222]

解答して頂きありがとうございます。

そうなのですね。
そもそもの総数countを取得する方法が間違っていたのですね。
classで出来そうな方法を探ってみます。

ありがとうございました。

[yambejp]

<div class="count">1</div>
<div class="count">2</div>
<div class="count">3</div>
<script>
const node=[...document.querySelectorAll('.count')].pop();
console.log(node.textContent);
</script>

Answer 3

jstl内のForEachの一番下の部分に

<input type="hidden" id="count" value="${status.count}"> を仕込んで

そもそも論として、同じIDはHTMLに複数存在してはいけません。「同じIDのうちで最後のものを探す」というやり方そのものが不適当です。

Comments

[ataru2222]

解答して頂きありがとうございます。

そうなのですね。
classで行の総数をカウントする方法を探ってみます。

ありがとうございました。