onclickから値の取得ができなかった in html

切り分け

①onclickで値を取得する。→OK

html

<input id="numberOfLogs" type="hidden" th:value="${numberOfLogs}">

javascript

 document.getElementById("numberOfLogs").onclick =  function test(e){
         console.log(e.target.value);
       }

②値が動的でも問題ないかの切り分け　その１

１．値を固定

html

 <input id="test0"  th:value="${numberOfLogs}">

javascript

 for(let i=0; i<1; i++){
           document.getElementById("test" + i).onclick =  function test(e){
                 console.log(e.target.value);
               }
        }

２．動的に生成した値の確認

コンソールにて

<div id="'joinRoom' + ${stat.index}" onclick="getLog()">貯蓄の定義</div>

${stat.index}を先に評価しないといけない事が確認できた。

idでは式を評価できないので、th:idに修正した。

次にクリック時のイベントで発生したエラーについて。

html

<td ><div th:id="'joinRoom' + ${stat.index}" th:text="${room.roomName}" ></div></td>

JavaScript

const numberOfLogs = document.getElementById("numberOfLogs").value;
               for(let i = 0; i<numberOfLogs; i++){
                   document.getElementById("joinRoom" + i).onclick = function (){
                       console.log(document.getElementById("getRoom" + i).textContent)
                   }
                    
               }

         }

Java

model.addAttribute("numberOfLogs", roomPage.getSize());

cannot set properties of null (setting 'onclick')が発生した。しかし、クリックイベントは動作した。

以上の事からnullの原因がJava側のroomPage.getSize()側にあると判明。元々はPageableの取得件数を表示するというものだ。

ただ、これが実際に取得した件数と相違がある場合にこのfor文ではnullが発生する。

なので、実際に返されるListであるroomPage.getContent().size()で取得をするとうまくいった。