javascriptで100マス計算プログラム

問題ボタンで新しい問題が表示される。
解答ボタンで解答の表示、非表示が切り替え可能。

javascriptで百マス計算プログラム

なんとか動きましたがコードむちゃくちゃです。
アドバイスお願いします。

100masu.html

<div align="center">

<script>

function arrayShuffle(array) {
  for(var i = (array.length - 1); 0 < i; i--){
    var r = Math.floor(Math.random() * (i + 1));
    var tmp = array[i];
    array[i] = array[r];
    array[r] = tmp;
  }
  return array;
}

function mondai(){
let num1 = [...Array(9)].map((_, i) => i + 1);
let num2 = [...Array(9)].map((_, i) => i + 1);
let num3 = "";
arrayShuffle(num1);
arrayShuffle(num2);

document.write("<table border=1>");
for(let y = 0; y < 9; y++){
	document.write("<tr>");
	if(y=="0"){
		document.write("<td>＋</td>");
		for(x=0;x<9;x++){
			document.write("<td>");
			document.write(num2[x]);
			document.write("</td>");
		}		
    }else{
		document.write("<td>");
		document.write(num1[y]);
		document.write("</td>");
		for(x=0;x<9;x++){
			document.write("<td class='kaitou'>");
			num3 = Number(num2[x]) + Number(num1[y]);
			console.log(num3);
			document.write(num3);
			document.write("</td>");
		}
	}
	document.write("</tr>");
}
document.write("</table>");
}

let count = 0;
function kaitou(){
	count++;
	let kaitou = document.getElementsByClassName('kaitou');
	if(count % 2 == 1){
		for(i=0;i<kaitou.length;i++){
			kaitou[i].style.color = "#ffffff";
		}
	}else{
		for(i=0;i<kaitou.length;i++){
			kaitou[i].style.color = "#000000";
		}
	}
}

mondai();

</script>

<style>
	<!--
	td{
		text-align:center;
		width:40px;
		height:40px;
	}
	-->
</style>

	<div style="margin:15px 0px;">
		<input type="button" value="問題" onclick="location.reload()">　<input type="button" value="解答" onclick="kaitou()">
	</div>

</div>