电子邮件生成器 (Javascript)

Question

我正在尝试创建一个电子邮件生成器（供个人使用），它需要输入名字和姓氏，然后使用我创建的数组中的域名列表。 从这个site 中得到了这个想法，并根据我的需要对其进行了一些调整。

这是示例代码。

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;
}

结果将只打印数组上的最后一个值，该值始终为“mac.com”，因此它将是“vb@mac.com,v.b@mac.com,vb@mac.com...”

我在想它会显示所有可能的组合，例如

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...

等等。

我做得对吗，还是有什么我需要添加或可以完成的？

最近刚学习编码时，我一直在敲我的脑袋，需要这里专业人士的指导。

我一直在考虑这样做，但我想我的代码会很长。

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

编辑：再次从头开始，将根据下面的 cmets 采用不同的方法。

Answer 1

我试了一下，得到了result。您可以在此处查看代码：

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;
}

我将 {} 更改为 else 部分和 if 循环，并添加了一个保存结果的数组。然后我使用push 函数来填充我的数组，最后一步是将innerHTML 设置为数组的内容