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

Question

如果它是超级原始的和像初学者一样，请快速道歉。我正在尝试制作一个自定义链接，该链接会根据您输入的内容而变化。但是，该输入也必须更改才能建立该链接。每次乞求都是相同的，即"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>

结果网页，如果假设我输入瓦尔达斯：达里哈，帕瓦尔德：加尔迪凯特，组：IT15。您单击按钮，其下方的链接将更改为"https://whatever.com/edu-it15/it15-darija.g.com"。如果我到目前为止的情况完全不对，请提前感谢您的麻烦。附言我正在使用括号。

Answer 1

您可以获取所需字符串的模板文字，并从输入中获取值并将结果添加到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>

Answer 2

你不需要在按钮加载内输入输入就足够了，toLowerCase有拼写错误，你可以在页面加载时存储原始链接值：

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

使用 .value 代替 .innerHTML，因为您想读取该输入的值，而不是 HTML 内容。此外，当您要更新元素的内容时，请使用相等运算符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>