javascript - 通过使用变量更改添加的随机输入来建立链接

Question

如果它 super 原始且像初学者，请快速道歉。我正在尝试制作一个自定义链接，该链接会根据您输入的内容而变化。然而，该输入也必须改变才能建立该链接。每次请求都是相同的“https://whatever.com/edu-”，然后添加您输入的自定义组编号，该编号始终以小写字母开头，然后是“/”，组名再次具有相同的要求，“-”，然后名称全部小写，“.”，您在“.com”中输入的姓氏的第一个小写字母。如果它不难，我希望相同的代码不会变得太高级，因为我仍然只涵盖了 js 的基础知识，主要是 var/slice/string。

我试过分别给它们变量，但后来我不太确定如何分别选择它们以使其成为一个函数，所以我将它们堆叠在一起希望它能起作用但由于某种原因它没有加载我需要的答案。我的猜测是，我可能用 var 弄乱了函数。

function MyFunction() {
  var name = document.getElementById("name").innerHTML;
  var name2 = name.toLowerCase();
  var lname = document.getElementById("lname").innerHTML;
  var lname2 = lname.toLowercase();
  var lname = str.substring(0, 1);
  var group = document.getElementById("group").innerHTML;
  var group2 = group.toUpperCase();
  document.getElementById("result").innerHTML + "group" + "/" + "group" + "-" + "name" + "." + "lname" + ".com"
}

<form>
  Vardas:
  <input id="name" type="text"> Pavardė:
  <input id="lname" type="text"> Grupė:
  <input id="group" type="text">
</form>

<button onLoad="MyFunction()">
  <input type="button" value="Click here" onclick="MyFunction()" />
</button>
<br>

<div id="result">
  https://whatever.com/edu-
</div>

假设我输入 Vardas: Darija, Pavardė: Galdikaitė, Group: IT15，结果网页。您单击按钮，它下面的链接变为“https://whatever.com/edu-it15/it15-darija.g.com”。如果到目前为止我所拥有的根本不对，请预先感谢您的麻烦。附言我正在使用括号。

Answer 1

你可以拿一个template literal对于想要的字符串并从输入中获取值并将结果添加到 innerHTML。

只需点击按钮或输入即可提交。

function MyFunction() {
  var name = document.getElementById("name").value.toLowerCase(),
      lname = document.getElementById("lname").value[0].toLowerCase(),
      group = document.getElementById("group").value.toUpperCase();

  document.getElementById("result").innerHTML += `${group}/${group}-${name}.${lname}.com`;
}

<form>
  Vardas:
  <input id="name" type="text"> Pavardė:
  <input id="lname" type="text"> Grupė:
  <input id="group" type="text">
  <input type="button" value="Click here" onclick="MyFunction()" />
</form>
<br>
<div id="result">https://whatever.com/edu-</div>