Javascriptを用いてテーブル作成

実現したいこと

tableタグとそれに関連するタグを利用し、登録した名前とニックネームを最大3人分までテーブル表示という課題がありましてこちらを実装したいです。

前提

ここに質問の内容を詳しく書いてください。

今、Javasciptの実装をしていて上記の課題をやっているのですが、挙動が何も確認されずどなたかご教授お願い致します。

該当のソースコード


html


test.html


<!DOCTYPE html>
<html>
    <head>
        <title>アカウント登録</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          .base {
            margin: 2% 7% 0;
            height: 500px;
            background: blue;
            padding: 5% 10%;
            box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
          }
          input {
            width: 300px;
            height: 40px;
            font-size: large;
          }
          #tuikaBtn {
            background: green;
          }
          h1 {
            font-family: serif;
          }
          .form-control::placeholder {
              color: #cacaca;
              opacity: 1;
          }
          table {
            border-collapse: collapse; 
          }

          th,td {
            border: 1px solid #312929;
            padding: 5px 10px;
          }
          .card {
            width: 100%;
            height: 350px;
          }
          .back{
            padding: 30px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .form-group{
            margin: 10px 0 15px 0px;
          }
          #result {
            font-size: 120%;
            margin: 10;
            margin: 10px 20px;
            padding: 10px 5px 20px;
            margin: 10px 5px 10px 5px;
          }

          .row .card{
            color: red;
          }

          .card{
            color: blue;
            display: block;
            position: relative;
          }

          #modal{
            display: none;
            margin:1.5em auto 0;
            background-color: white;
            border: 1px solid black;
            width: 50%;
            padding: 10px 20px;
            position: fixed;
            border-radius: 5px;
          }

          #overLay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0,0,0,0.75);
          }

        </style>
    </head>
    <body>
        <div class="base container">
          <div class="row">
            <h1>アカウント登録</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
                    </div>

                </form>
                <div id="tuikaMoto">

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      <div id="overLay">
      </div>
      <script src="test.js"></script>
    </body>
</html>

javascript




test.js


var tuikaBtn = document.getElementById("tuikaBtn");

tuikaBtn.addEventListener("click", function() {
  var mybody = document.getElementsByTagName("body")[0];
  var table = document.createElement("table");
  var myth1 = document.createElement("th");
  var myth2 = document.createElement("th");
  var nametd1 = document.createElement("td");
  var nametd2 = document.createElement("td");
  var nametd3 = document.createElement("td");
  var nicknametd1 = document.createElement("td");
  var nicknametd2 = document.createElement("td");
  var nicknametd3 = document.createElement("td");


  myth1.textContent = "名前";
  nametd1.textContent = `${namae.value}`;
  nametd2.textContent =`${namae.value}`;
  nametd3.textContent =`${namae.value}`;

  myth2.textContent = "ニックネーム";
  nicknametd1.textContent =`${nickname.value}`;
  nicknametd2.textContent =`${nickname.value}`;
  nicknametd3.textContent =`${nickname.value}`;

  var mytable = document.getElementById("table");

  for (var i=0; i < mytable.rows.length; i++) {
    for (var j=0; j < mytable.rows[i].cells.length; j++) {
      console.log(  "(" + i + "," + j + ") : " + mytable.rows[i].cells[j].innerHTML  );
    }
  }
});