Email Generator (Javascript)

Question

I'm trying to create an email generator (for personal use) which needs an input of first and lastname then uses a list of domain names in an array I created. Got the idea from this site and tweaked it a bit for what I am needing.

Here's the sample code.

function permutate(form) {

  var firstlastname = form.firstlastname.value.toLowerCase().trim();
  var namesplit = firstlastname.split(" ");
  var firstname = namesplit[0];
  var lastname = namesplit[1];
  var domain = ['gmail.com','yahoo.com','hotmail.com','msn.com','outlook.com','live.com','me.com','aol.com','mac.com'];

  if (firstname==null || firstname==""){
    document.getElementById("results").innerHTML= "At least enter a first name to get started!";
    return false;    
  } else if (lastname==null || lastname==""){
    document.getElementById("results").innerHTML= "Come on!, enter a last name!";
    return false;    
  } else {}
  for (var i=0; i<domain.length;i++)
  var p1 = firstname + "@" + domain[i] + ",";
  var p2 = firstname + lastname + "@" + domain[i] + ",";
  var p3 = firstname + "." + lastname + "@" + domain[i] + ",";
  var p4 = firstname.charAt(0) + lastname + "@" + domain[i] + ",";
  var p5 = firstname.charAt(0) + "." + lastname + "@" + domain[i] + ",";
  var p6 = firstname + lastname.charAt(0) + "@" + domain[i] + ",";
  var p7 = firstname + "." + lastname.charAt(0) + "@" + domain[i] + ",";
  var p8 = firstname.charAt(0) + lastname.charAt(0) + "@" + domain[i] + ",";
  var p9 = firstname + "_" + lastname + "@" + domain[i] + ",";
  var p10 = firstname.charAt(0) + "_" + lastname + "@" + domain[i] + ",";
  var p11 = lastname + firstname + "@" + domain[i] + ",";
  var p12 = lastname + "." + firstname + "@" + domain[i] + ",";    
  var p13 = lastname + firstname.charAt(0) + "@" + domain[i] + ",";
  var p14 = lastname + "." + firstname.charAt(0) + "@" + domain[i];

  var addresses= p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9 + p10 + p11 + p12 + p13 + p14;

    document.getElementById("results").innerHTML= addresses;
}

the result would just print the last value on the array which is always "mac.com" so it would be "vb@mac.com,v.b@mac.com,vb@mac.com..."

I was thinking that it would display all possible combinations like

vb@gmail.com,v.b@gmail.com,vb@gmail.com...
vb@yahoo.com,v.b@yahoo.com,vb@yahoo.com...
vb@hotmail.com,v.b@hotmail.com,vb@hotmail.com...

etc..

Am I doing it correctly, or is there something I need to add or can it be done?

I've been banging my head as I just recently learned coding and would need guidance from the pros here.

I was thinking of doing it the long way but I think I would have a very long code.

firstname + "@" + "gmail.com" + ",";
firstname + lastname + "@" + "yahoo.com" + ","

Edit : started from scratch again and will proceed on a different approach based on the comments below.

Answer 1

I tried a little bit around and got this as result. You can see the code here:

html:

<form name="names">
  <input type="text" id="box1" name="firstlastname" placeholder="Luke Skywalker"><br>
<br>
  <input type="submit" id="button-make" value="Make Variations" onClick="permutate(this.form);return false;">
</form>

<input type="submit" id="button-reset" value="Reset" onClick="reset('results');return false;">

<div id="results"></div>

css:

#form {
  margin-top: 20px;
}

input[type] {
  font-size: 25px;
  font-family: arial;
}

#box1 {
  width: 317px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid rgb(200, 200, 200);
  border-top-color: rgb(100, 100, 100);
  border-radius: 5px;
  color: #5A5A5A;
}

#button-reset {
  position: relative;
  display: inline-block;
}

#button-make,
#button-reset {
  float: left;
}

#button-reset {
  margin: 0 0 0 10px;
}

#results {
  position: relative;
  height: 200px;
  display: block;
  overflow: auto;
  margin-top: 45px;
  padding: 15px;
  border: 1px solid rgb(200, 200, 200);
  /*border-bottom: 1px solid rgb(200,200,200);*/
  background: rgb(245, 245, 245);
  color: rgb(50, 50, 50);
  font-size: 20px;
  line-height: 36px;
  font-family: arial;
}

javascript:

function permutate(form) {

  var firstlastname = form.firstlastname.value.toLowerCase().trim();
  var namesplit = firstlastname.split(" ");
  var firstname = namesplit[0];
  var lastname = namesplit[1];
  var arr = [];
  var domain = ['gmail.com', 'yahoo.com', 'hotmail.com', 'msn.com', 'outlook.com', 'live.com', 'me.com', 'aol.com', 'mac.com'];

  if (firstname == null || firstname == "") {
    document.getElementById("results").innerHTML = "At least enter a first name to get started!";
    return false;
  } else if (lastname == null || lastname == "") {
    document.getElementById("results").innerHTML = "Come on!, enter a last name!";
    return false;
  } else {
    for (var i = 0; i < domain.length; i = i + 1) {
      var p1 = firstname + "@" + domain[i] + ",";
      var p2 = firstname + lastname + "@" + domain[i] + ",";
      var p3 = firstname + "." + lastname + "@" + domain[i] + ",";
      var p4 = firstname.charAt(0) + lastname + "@" + domain[i] + ",";
      var p5 = firstname.charAt(0) + "." + lastname + "@" + domain[i] + ",";
      var p6 = firstname + lastname.charAt(0) + "@" + domain[i] + ",";
      var p7 = firstname + "." + lastname.charAt(0) + "@" + domain[i] + ",";
      var p8 = firstname.charAt(0) + lastname.charAt(0) + "@" + domain[i] + ",";
      var p9 = firstname + "_" + lastname + "@" + domain[i] + ",";
      var p10 = firstname.charAt(0) + "_" + lastname + "@" + domain[i] + ",";
      var p11 = lastname + firstname + "@" + domain[i] + ",";
      var p12 = lastname + "." + firstname + "@" + domain[i] + ",";
      var p13 = lastname + firstname.charAt(0) + "@" + domain[i] + ",";
      var p14 = lastname + "." + firstname.charAt(0) + "@" + domain[i];

      var addresses = p1 + " " + p2 + " " + p3 + " " + p4 + " " + p5 + " " + p6 + " " + p7 + " " + p8 + " " + p9 + " " + p10 + " " + p11 + " " + p12 + " " + p13 + " " + p14;
      arr.push(addresses)
    }
  }
  var innertext = document.getElementById("results");
  innertext.innerHTML = arr;
}

I changed the {} for else part and the if loop and added the an array which holds the results. Then I used the push function to fill my array and the last step is to set the innerHTML to the content of the array