Javascript counting the letters inputed in email instead of outputting the email itself

Question

I'm stuck on trying to get the email outputted instead of numbers related to the amount of words inputed

var output2 = "Email: " + at; is counting the amount of letters that was inputed.

I'm trying to figure out how its counting the amount of letters and why is it not outputting the email instead

Demo in Stack Snippets

function myFunction() {
  var uname = document.getElementById("uname").value;
  var age = document.getElementById("age").value;
  var at = document.getElementById("email").value.indexOf("@");
  submitOk = "true";


  if (uname.length > 16) {
    alert("Characters have exceeded specified amount");
    submitOk = "false";
  }

  if (age < 13 || age > 19) {
    alert("Numbers must be between 13 and 19");
    submitOk = "false";
  }

  if (at == -1) {
    alert("not a valid E-mail");
  }

  if (submitOk == "false") {}

  if (submitOk == "true") {}

  var output = "Name: " + uname;
  var output1 = "Age: " + age;
  var output2 = "Email: " + at;

  document.getElementById("output").innerHTML = output;
  document.getElementById("output1").innerHTML = output1;
  document.getElementById("output2").innerHTML = output2;
}

<form onsubmit="return myFunction()">
  Name : <br><input type="text" id="uname" size="30" placeholder="Maximum of 16 Characters"><br> Age : <br><input type="number" id="age" size="30" placeholder="From 13 to 19 only"><br> E-mail : <br><input type="text" id="email" size="30" placeholder="[email protected]"><br>
  <br>
  <input type="submit" onclick="myFunction();return false" value="Submit">
</form>

<table class="center">
  <tr>
    <td>
      <div id="output"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="output1"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="output2"></div>
    </td>
  </tr>
</table>