Неожиданный Идентификатор и функция, которая кажется в порядке

Question

В настоящее время я выполняю Javascript практику, чтобы попытаться кодировать веб-приложение, которое будет принимать мои входные данные в форме и добавлять его в шаблон для генерации родительского письма.

Это то, что я сделал, но я застрял в той части, где я написал внутреннюю HTML шаблона письма, когда браузер продолжал говорить «Неожиданный идентификатор». Кроме того, они говорят, что функция car () не определена, но я не знаю, почему она не определена, поскольку мне кажется, что это нормально - и она работала до того, как я добавил функцию letter ().

function car() {
      var x = document.getElementById("heyu");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    };
    function water(){
      if(document.getElementsByClassName('entry')[0].value=='apple'){
        document.getElementsByClassName("initial")[0].classList.add('passed');
       document.getElementsByClassName("pizza")[0].innerHTML="";
      document.getElementsByClassName("maco")[0].innerHTML="<h3>Main Menu</h3><br><div><h4>Write a Greeting</h4><h4>Write a parent letter</h4></div>";
        document.getElementsByClassName("maco")[0].getElementsByTagName("h4")[0].classList.add("greet");
         document.getElementsByClassName("maco")[0].getElementsByTagName("h4")[1].classList.add("parent");
        
        document.getElementsByClassName("parent")[0].addEventListener("click",function(){
      document.getElementsByClassName("maco")[0].innerHTML="<form><wrap>Name of Teacher:<input></wrap><wrap>Name: <input></wrap><wrap>Date Range from <input> to <input></wrap><wrap>Reason:<input></wrap><wrap>Name of Parent:<input></wrap><wrap><button>Enter<button></wrap></form>";
         document.getElementsByClassName("parent")[0].classList.remove("maco").add("pl");
          
          var numba=["first, second, third, fourth, fifth, sixth"]
          document.querySelectorAll('.parent form input').forEach((input, i) => {
      input.classList.add(numba[i])
    
     });
          var nameOfCher=document.querySelectorAll('.parent form .first').value;
          var nameMe=document.querySelectorAll('.parent form .second').value;     
          var start=document.querySelectorAll('.parent form .third').value;      
          var end=document.querySelectorAll('.parent form .fourth').value;      
          var reas=document.querySelectorAll('.parent form .fifth').value;     
          var par=document.querySelectorAll('.parent form .sixth').value;
          function letter(){
            document.querySelectorAll(".parent form button").addEventListener("click", function(){
              document.getElementsByClassName("maco")[0].innerHTML="Dear Mr" +nameOfCher+"<br><p>"+nameMe+" was unable to attend school from"+ start+"to"end +"due to"+reas+ ".</p><br><br><br><p>Best Regards</p><br>"+par
            });
          };
          return letter();
        });
    
      }else{
      document.getElementsByClassName('pizza')[0].textContent="Denied"
    }};
    document.getElementsByClassName("entry")[0].addEventListener("keyup",function(){
      if(event.keyCode===13){
        water();
      };
    })
    

    h1{
      font-family: 'Libre Baskerville', serif;
      text-align: center;
      font-size: 4em;
      color:#e0e4ec
    }
    .initial{
      background: #556c9a
    }
    .keys{
      text-align:center;
      
    }
    .fa-fingerprint{
      text-align:center;
      padding-left:2%;
      padding-right:2%;
      font-size:3rem;
    }
    h2{
      position:relative;
      text-align:center;
    }
    h3{
        position:relative;
      text-align:center;
      color:white;
      font-family: 'Righteous', cursive;
      font-size:3em;
    }
    .press:hover{
      color:yellow;
    }
    .heya{
      text-align:center;
    }
    .type{
      display:none;
    }
    .type.wash{
      display:block;
    }
    .passed{
      transition-property:background-color;
      transition-duration:1.5s;
      background-color:#4d4c7d;
    }
    h4{
      display:relative;
      text-align:center;
      color:white;
      border-style:solid;
      border-width: 5px;
      border-color: white;
      border-radius:10px;
      font-size:1rem;
      padding-left:3%;
      padding-right:3%;
      padding-top:1%;
      padding-bottom:1%;
      font-family: 'Righteous', cursive;
      margin-left:40%;
      margin-right:40%;
    }
    h4:hover{
      margin-left:38%;
      margin-right:38%;
      color:yellow;
      border-color:yellow;
    }
    form{
      text-align:center;
      color:white;
    }
    wrap{
      position:relative;
      display:block;
      padding-top:1%;
      padding-bottom:1%;
    }

      <h1 class="pizza">Pineapple</h1>
      <body class="maco">
        <div class="keys">
          <span class="press"  onclick="car()"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
          <span class="type" id="heyu"><input class="entry" placeholder="Password"></span>
        </div>
      </body>
    </html>

Ссылка на CodePen

Заранее благодарим за любую помощь!