Edit in JSFiddle

<!DOCTYPE html>
<html>
<head>
  <title>ES6 проба</title>
  <meta charset='utf-8'>
  <link rel='stylesheet' href='../newJS_css/newJS_oll_css.css'>

</head>
<body>
  <div class = "example" id = "tamasrach">

    <script async src = "../newJS_script/tamasrach.js"></script>

    <form name = "whoIs" class = "whoIs see" >

      <p><strong>Введите данные</strong><p>

      <input type = text name = "pet" class = "punct" value = " введите имя"><Br>

      <select name = "classPet" class = "punct">
        <option selected value = "кот"> выбор питомца </option>
        <option value = "кот">кот</option>
      </select><Br>

      <input type = "button" value = "начать" class = "punct" name = "enter"><Br>

    </form>

    <menu class ="tamMenu">
      <p><strong>меню тамогочи</strong></p>
      <li class = "punct">кормить

        <ul class = "subMenu">
          <li class = "punct">мясо</li>
          <li class = "punct">рыба</li>
          <li class = "punct">сухой корм</li>
        </ul>

      </li>
      <li class = "punct">ухаживать

        <ul class = "subMenu">
          <li class = "punct">убирать за питомцем</li>
          <li class = "punct">помыть питомца</li>
        </ul>

      </li>
      <li class = "punct">сон

        <ul class = "subMenu">
          <li class = "punct">разбудить</li>
          <li class = "punct">уложить</li>
        </ul>

      </li>
      <li class = "punct">играть

        <ul class = "subMenu">
          <li class = "punct">мячик</li>
          <li class = "punct">фантик</li>
        </ul>

      </li>

      <input type = 'button' value = "пуск" class = "button" name = "start" >
      <input type = 'button' value = "сброс" class = "button" name = "reset">
    </menu>

    <div class = "log"></div>

  </div>

</body>
#tamasrach  .tamMenu , #tamasrach .subMenu , #tamasrach .whoIs {
  text-align: center;
  display: none;
  position: absolute;
  background-color: #f2ce8f;
  border: solid 2px #a4a685;
  border-radius: 5px;
  list-style-type: none;
  padding-left: 0;
}

#tamasrach .punct {
  border: solid 1px #a4a685;
  margin: 5px 15px;
  width: 130px;
  background-color: #d8d9c5;
  border-radius: 0 10px;
}

#tamasrach .tamMenu.see {
  display: block;
  margin: 35px 0 0 15%;
}

#tamasrach .tamMenu .subMenu.see {
  display: block;
}

#tamasrach .tamMenu .button {
  margin: 10px;
}

#tamasrach .log {
  position: relative;
  right: -35%;
  top: 10px;
  width: 50%;
  height: 280px;
  border: solid 1px #c2961d;
  background: #d7f5f0;
}

#tamasrach .whoIs.see {
  display: block;
  margin: 35px 0 0 15%;
  padding: 10px;
}

#tamasrach .whoIs [name = "classPet"], #tamasrach .whoIs .enterButton {
  margin-top: 10px;
}
"use strict"

var tamasrach = document.getElementById('tamasrach'),
    whoIs     = document.forms.whoIs,
    tamMenu   = tamasrach.querySelector('.tamMenu'),
    logScreen = tamasrach.querySelector('.log'),
    essence, name, classPet ;

tamasrach.onsubmit = function() {return false;}

tamasrach.addEventListener('click', inputData);

function inputData (event){

  let nam = event.target.name, val = event.target.value;

  if(nam === "enter"){

    startPet();
  }
}

function startPet(){

  name     = whoIs.elements.pet.value ,
  classPet = whoIs.elements.classPet.value;
alert(classPet);
  essence = Essence(name, classPet);
}

function Essence(n, c){
  let  name = n, classPet = c;
  logScreen.textContent = cOA.begin;
}

var cOA = {
  begin: `Хорошо. Вы решили завести ${classPet} по имени ${name}.
         Если вы действительно готовы начать за ним ухаживать?`,
}