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

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

やってみた解決法

関数の場所を入れ替える

ソースコード:

dot.html
<html>
    <head>
	<script type="text/javascript">
	    var cnt = 0;

	    function save(savetext) {
		var blob = new Blob([savetext],{type:'text/plain'});
		var link = document.createElement('a');
		link.href = URL.createObjectURL(blob);
		link.download = 'savefile.plat';
		link.click();
	    }

	    function inputclick(){
		document.getElementById('upload').click();
	    }
	</script>
    </head>
    <body style="background-color:#dddddd;">
	<style>
	.event_table tr td:hover {background-color: #d9efff;}

	.event_table {cursor: pointer; user-select: none}

	.save {
		   background-image: url('https://uploda1.ysklog.net/uploda/360cebe7b5.jpg');
		   width: 120px;
	           height: 70px;
		   cursor: pointer;
	}

	.load {
		   background-image: url('https://uploda1.ysklog.net/uploda/bba2c0d83a.jpg');
		   width: 120px;
	           height: 70px;
		   cursor: pointer;
	}

	label> input {
	    top: 1000px;
	    left: 1000px;
	    display:none;
	}

	</style>

	<button onclick="save('120000102000120')" class='save'"></button>
	<button onclick="inputclick()" class='load'"></button>

	<label for="file_upload"><input type="file" id="upload" accept=".plat" /></label>

	    <table bgcolor="#ffffff" class="event_table" cellspacing="0">
		<tr>
		    <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>
		</tr>
		<tr>
		    <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>
		</tr>
		<tr>
		    <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>
		</tr>
		<tr>
		    <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>
		</tr>
		<tr>
		    <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>
		</tr>
		<tr>
		    <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>
		</tr>
		<tr>
		    <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>
		</tr>
	    </table>
	<span id="go"></span>
    </body>
    <script>
	let input = document.getElementById('upload');
	let reader = new FileReader();

	var loading;

	input.addEventListener('change', () => {
	    for(file of input.files){
	        reader.readAsText(file, 'UTF-8');
		reader.onload = ()=> {
		    console.log(reader.result);
		};
	    }
	});

	function peint(場所){ 
	    var element = document.getElementById(場所);      //問題部分
	    element.style.backgroundColor = '#0000ff';
	}
    </script>
</html>