dotエディターを作りたいのですが...

現在dot絵エディターを作っているのですが、色変更のためにプログラムを組んだところ、
Uncaught TypeError: Cannot read properties of null (reading 'style')
と出て来ます。
どうすればいいのでしょうか。

やってみた解決法

関数の場所を入れ替える

ソースコード:

dot.html
1<html>
2    <head>
3	<script type="text/javascript">
4	    var cnt = 0;
5
6	    function save(savetext) {
7		var blob = new Blob([savetext],{type:'text/plain'});
8		var link = document.createElement('a');
9		link.href = URL.createObjectURL(blob);
10		link.download = 'savefile.plat';
11		link.click();
12	    }
13
14	    function inputclick(){
15		document.getElementById('upload').click();
16	    }
17	</script>
18    </head>
19    <body style="background-color:#dddddd;">
20	<style>
21	.event_table tr td:hover {background-color: #d9efff;}
22
23	.event_table {cursor: pointer; user-select: none}
24
25	.save {
26		   background-image: url('https://uploda1.ysklog.net/uploda/360cebe7b5.jpg');
27		   width: 120px;
28	           height: 70px;
29		   cursor: pointer;
30	}
31
32	.load {
33		   background-image: url('https://uploda1.ysklog.net/uploda/bba2c0d83a.jpg');
34		   width: 120px;
35	           height: 70px;
36		   cursor: pointer;
37	}
38
39	label> input {
40	    top: 1000px;
41	    left: 1000px;
42	    display:none;
43	}
44
45	</style>
46
47	<button onclick="save('120000102000120')" class='save'"></button>
48	<button onclick="inputclick()" class='load'"></button>
49
50	<label for="file_upload"><input type="file" id="upload" accept=".plat" /></label>
51
52	    <table bgcolor="#ffffff" class="event_table" cellspacing="0">
53		<tr>
54		    <td id="td2" id="1" onclick="peint('1')">   </td><td id="td2" id="2" onclick="peint('2')">   </td><td id="td2" id="3" onclick="peint('3')">   </td><td id="td2" id="4" onclick="peint('4')">   </td><td id="td2" id="5" onclick="peint('5')">   </td><td id="td2" id="6" onclick="peint('6')">   </td><td id="td2" id="7" onclick="peint('7')">   </td><td id="td2"  id="8" onclick="peint('8')">   </td><td id="td2" id="9" onclick="peint('9')">   </td><td id="td2" id="10" onclick="peint('10')">   </td>
55		</tr>
56		<tr>
57		    <td id="td2" id="11" onclick="peint('11')">   </td><td id="td2" id="12" onclick="peint('12')">   </td><td id="td2" id="13" onclick="peint('13')">   </td><td id="td2" id="14" onclick="peint('14')">   </td><td id="td2" id="15" onclick="peint('15')">   </td><td id="td2" id="16" onclick="peint('16')">   </td><td id="td2" id="17" onclick="peint('17')">   </td><td id="td2"  id="18" onclick="peint('18')">   </td><td id="td2" id="19" onclick="peint('19')">   </td><td id="td2" id="20" onclick="peint('20')">   </td>
58		</tr>
59		<tr>
60		    <td id="td2" id="21" onclick="peint('21')">   </td><td id="td2" id="22" onclick="peint('22')">   </td><td id="td2" id="23" onclick="peint('23')">   </td><td id="td2" id="24" onclick="peint('24')">   </td><td id="td2" id="25" onclick="peint('25')">   </td><td id="td2" id="26" onclick="peint('26')">   </td><td id="td2" id="27" onclick="peint('27')">   </td><td id="td2"  id="28" onclick="peint('28')">   </td><td id="td2" id="29" onclick="peint('29')">   </td><td id="td2" id="30" onclick="peint('30')">   </td>
61		</tr>
62		<tr>
63		    <td id="td2" id="31" onclick="peint('31')">   </td><td id="td2" id="32" onclick="peint('32')">   </td><td id="td2" id="33" onclick="peint('33')">   </td><td id="td2" id="34" onclick="peint('34')">   </td><td id="td2" id="35" onclick="peint('35')">   </td><td id="td2" id="36" onclick="peint('36')">   </td><td id="td2" id="37" onclick="peint('37')">   </td><td id="td2"  id="38" onclick="peint('38')">   </td><td id="td2" id="39" onclick="peint('39')">   </td><td id="td2" id="40" onclick="peint('40')">   </td>
64		</tr>
65		<tr>
66		    <td id="td2" id="41" onclick="peint('41')">   </td><td id="td2" id="42" onclick="peint('42')">   </td><td id="td2" id="43" onclick="peint('43')">   </td><td id="td2" id="44" onclick="peint('44')">   </td><td id="td2" id="45" onclick="peint('45')">   </td><td id="td2" id="46" onclick="peint('46')">   </td><td id="td2" id="47" onclick="peint('47')">   </td><td id="td2"  id="48" onclick="peint('48')">   </td><td id="td2" id="49" onclick="peint('49')">   </td><td id="td2" id="50" onclick="peint('50')">   </td>
67		</tr>
68		<tr>
69		    <td id="td2" id="51" onclick="peint('51')">   </td><td id="td2" id="52" onclick="peint('52')">   </td><td id="td2" id="53" onclick="peint('53')">   </td><td id="td2" id="54" onclick="peint('54')">   </td><td id="td2" id="55" onclick="peint('55')">   </td><td id="td2" id="56" onclick="peint('56')">   </td><td id="td2" id="57" onclick="peint('57')">   </td><td id="td2"  id="58" onclick="peint('58')">   </td><td id="td2" id="59" onclick="peint('59')">   </td><td id="td2" id="60" onclick="peint('60')">   </td>
70		</tr>
71		<tr>
72		    <td id="td2" id="61" onclick="peint('61')">   </td><td id="td2" id="62" onclick="peint('62')">   </td><td id="td2" id="63" onclick="peint('63')">   </td><td id="td2" id="64" onclick="peint('64')">   </td><td id="td2" id="65" onclick="peint('65')">   </td><td id="td2" id="66" onclick="peint('66')">   </td><td id="td2" id="67" onclick="peint('67')">   </td><td id="td2"  id="68" onclick="peint('68')">   </td><td id="td2" id="69" onclick="peint('69')">   </td><td id="td2" id="70" onclick="input('70')">   </td>
73		</tr>
74	    </table>
75	<span id="go"></span>
76    </body>
77    <script>
78	let input = document.getElementById('upload');
79	let reader = new FileReader();
80
81	var loading;
82
83	input.addEventListener('change', () => {
84	    for(file of input.files){
85	        reader.readAsText(file, 'UTF-8');
86		reader.onload = ()=> {
87		    console.log(reader.result);
88		};
89	    }
90	});
91
92	function peint(場所){ 
93	    var element = document.getElementById(場所);      //問題部分
94	    element.style.backgroundColor = '#0000ff';
95	}
96    </script>
97</html>