通过使用变量更改添加的随机输入来制作 link

Question

如果它超级原始且像初学者，请快速道歉。我正在尝试制作一个自定义 link，它会根据您输入的内容而变化。然而，该输入也必须改变才能使 link。每次请求都是相同的，即“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，结果网页。您单击按钮，它下面的 link 变为“https://whatever.com/edu-it15/it15-darija.g.com”。如果到目前为止我所拥有的根本不对，请预先感谢您的麻烦。 P.S。我正在使用括号。

Answer 1

而不是 .innerHTML 使用 .value，因为您想要读取该输入的值，而不是它的 HTML 内容。此外，当您想要更新元素的内容时，请使用 equal 运算符 element.innerHTML = "<b>new value</b>”。检查下面的示例。

function MyFunction() {
  var name = document.getElementById("name").value.toLowerCase(),
  lname = document.getElementById("lname").value.toLowerCase(),
  group = document.getElementById("group").value.toLowerCase();
  // If you want to use only the first letter of the lname as stated in your example with "https://whatever.com/edu-it15/it15-darija.g.com", uncomment the next line
  // lname = lname.substr(0,1);

  document.getElementById("result").innerHTML =  "https://whatever.com/edu-" + 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>

Answer 2

您不需要在按钮 onload 中输入输入就足够了，toLowerCase 有错字，您可以在页面加载时存储原始 link 值：

const originalLink = document.getElementById("result").innerHTML;

function MyFunction() {
  var name = document.getElementById("name").value.toLowerCase();
  var lname = document.getElementById("lname").value.toLowerCase().substring(0, 1);
  var group = document.getElementById("group").value.toUpperCase();
  document.getElementById("result").innerHTML = originalLink.trim() + "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 onload="MyFunction()" type="button" value="Click here" onclick="MyFunction()" />
</form>

<br>

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

Answer 3

您有一些语法错误。请参阅以下重构代码，您将看到串联的行。

function MyFunction() {
  var name = document.getElementById("name").value.toLowerCase();
  var lname = document.getElementById("lname").value.toLowerCase().substring(0, 1);
  var 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">
</form>

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

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

Answer 4

您可以为想要的字符串取 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>

通过使用变量更改添加的随机输入来制作 link

Making a link by changing added random input by using variables

html

javascript

brackets