submit時に実行したいスクリプトがうまく動作しない

前提・実現したいこと

php+JavaScriptでフォーム入力送信後に同じ位置を表示させたく作業しています。
submit押下時にスクロールバーの位置をhiddenのinputのvalueにセットしてページがリロードさせるのが理想なのですが、セットにたどり着く前にページのリロードが走っていると思われます。

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

Uncaught TypeError: Cannot set properties of null (setting 'value')
    at HTMLInputElement.clickEvt

該当のソースコード

PHP
1<?php
2$rows=18;
3
4// POSTメソッドのときのみ実行
5if ($_SERVER['REQUEST_METHOD'] === 'POST') {
6    $position = is_null(filter_input(INPUT_POST, "position"))? $position: filter_input(INPUT_POST, "position");
7}
8?>
9<!doctype html>
10<html lang="ja" dir="ltr">
11<head>
12<meta charset="UTF-8">
13<title>My Site Top</title>
14<meta name="viewport" content="width=device-width, initial-scale=1">
15<meta name="description" content="Cover of the content">
16<link rel="stylesheet" href="css/stylesheet.css">
17</head>
18<body>
19<?php /* $rowsにはリンクデータ数が入っています */?>
20<?php for($i=1;$i<$rows;$i++):?>
21    <form method="post" action="" enctype="multipart/form-data">
22        <div class="links">
23            <?php /* リンクデータの記載 */?>
24            <input type="hidden" value="0,0" id="position<?php echo $i; ?>" name="position"/>
25            <input type="submit" id="submit<?php echo $i; ?>" class="clickEvent" name="sender" value="このリンクを編集する">
26        </div>
27    </form>
28<?php endfor;?>
29<script>
30    //---$positionにname=positionのinputでpostされたデータを記述
31    window.onload = function (){ window.scrollTo(<?php echo $position; ?>); }
32    function clickEvt(){
33        var getWindowScrollPosition = function() {
34            return {
35                x : (typeof window.scrollX !== 'undefined') ? window.scrollX : ((typeof document.documentElement.scrollLeft !== "undefined") ? document.documentElement.scrollLeft : document.body.scrollLeft),
36                y : (typeof window.scrollY !== 'undefined') ? window.scrollY : ((typeof document.documentElement.scrollTop  !== "undefined") ? document.documentElement.scrollTop  : document.body.scrollTop)
37            };
38        };
39        var position = getWindowScrollPosition();
40        document.getElementById("position0").value = position["x"]+","+position["y"];
41    <?php for($num=1;$num<=$rows;$num++): ?>
42        document.getElementById("position<?php echo $num; ?>").value = position["x"]+","+position["y"];
43    <?php endfor;?>
44    }
45    var hoge = document.getElementsByClassName('clickEvent');
46    for (var i = 0; i < hoge.length; i++) {
47    hoge[i].addEventListener("click", clickEvt, false);
48    console.log('#1')
49    }
50</script>
51</body>
52</html>

試したこと

スクリプトの記述位置をずらしたり、window.onunloadでクリックイベント処理を走らせてみたり。

m.ts10806

2022/01/01 08:48

$i はどこでどのように定義されているのでしょう。

can1980

2022/01/01 08:52

質問内容に関係がないので端折ってしまいました。上のフォームはリンクデータの数だけfor文で作っていまして、$iはそこで定義しています。

m.ts10806

2022/01/01 09:02

質問は編集できますし、文章だけではこちらの手元で再現できません。可能な限り、他者がコピペで現状再現できるようにコードを提示してください。「説明を元に見ている人（回答者）が勝手に補完したコード」はもはや質問者のコードとは別のものですし。「再現するようなコードを組む」となるともはや全く意味がないですし。

m.ts10806

2022/01/01 09:02

質問者が自己判断で省いた場所に実は原因があったって結構ある話ですよ。

can1980

2022/01/01 09:09

ありがとうございます。訂正しますね

can1980

2022/01/01 09:40

訂正を記載している間におかしな個所に気が付きました。 position0が自分の記載しているデータにありませんでした。

m.ts10806

2022/01/01 21:48

進んだようで何よりです。