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

ソースコード

<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>

追記：qiitaに投稿してみたらプログラムを書き換えて改善してくれた人がいた。感謝。
⇒Qiitaコメント欄　プログラム改善

<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='utf-8'>
  <title>100ます計算</title>
  <style>
  .container {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
  }
  table, td {
    border: 1px black solid;
  }
  td {
    text-align: center;
    width: 40px;
    height: 40px;
  }
  .buttons {
    text-align: center;
    margin: 15px 0px;
  }
  </style>
  <style id='cellHidden'>
  table tr:nth-child(1n+2) td:nth-child(1n+2) {
    color: #0000;
  }
  </style>
</head>
<body>
  <div class='container'>
    <div>
      <table>
      </table>
    </div>
    <div class='buttons'>
      <input type="button" value="問題" id='question'>
      <input type="button" value="解答" id='answer'>
    </div>
  </div>

  <script>
  'use strict';
  const table = document.querySelector('table');

  table.insertAdjacentHTML('afterbegin',
    `<tr>${'<td></td>'.repeat(10)}</tr>`.repeat(10));

  table.rows[0].cells[0].textContent = '+';

  const setTableValue = () => {
    const r1 = '123456789'.split('');
    const r2 = '123456789'.split('');
    for (let i = 1; i < 10; i++) {
      table.rows[0].cells[i].textContent = r1.splice(Math.floor(Math.random() * r1.length), 1);
      table.rows[i].cells[0].textContent = r2.splice(Math.floor(Math.random() * r2.length), 1);
    }
    for (let y = 1; y < 10; y++) {
      const n = +table.rows[y].cells[0].textContent;
      for (let x = 1; x < 10; x++) {
        table.rows[y].cells[x].textContent = n + +table.rows[0].cells[x].textContent;
      }
    }
  };

  setTableValue();
  cellHidden.disabled = true;

  document.addEventListener('click', e => {
    const id = e.target.id;
    if (id === 'question') setTableValue();
    else if (id === 'answer') cellHidden.disabled ^= 1;
  });
  </script>
</body>
</html>