Создание ссылки путем изменения добавленного случайного ввода с использованием переменных - PullRequest
Новая
       40

Создание ссылки путем изменения добавленного случайного ввода с использованием переменных

1 голос
/ 21 октября 2019

Быстрое извинение, если оно супер сырое и похожее на новичка. Я пытаюсь сделать пользовательскую ссылку, которая меняется в зависимости от того, что вы вводите. Однако этот вход также должен измениться, чтобы сделать эту ссылку. Запрашиваемая всегда одинакова: «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ė, Группа: IT15. Вы нажимаете на кнопку, и ссылка под ней меняется на "https://whatever.com/edu-it15/it15-darija.g.com".. Заранее благодарю за беспокойство, если то, что у меня есть, не соответствует действительности. PS Я использую скобки.

Ответы [ 4 ]

2 голосов
/ 21 октября 2019

Вы можете взять шаблонный литерал для искомой строки и взять значение из входных данных и добавить результат к 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>
0 голосов
/ 21 октября 2019

Вам не нужен ввод внутри кнопки onload для ввода должно хватить, 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>
0 голосов
/ 21 октября 2019

У вас есть несколько синтаксических ошибок. Посмотрите следующий реорганизованный код, вы увидите соединенные строки. 

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>
0 голосов
/ 21 октября 2019

Вместо .innerHTML используйте .value, так как вы хотите прочитать значение этого ввода, а не его HTML-содержимое. Кроме того, когда вы хотите обновить содержимое элемента, используйте равно operator 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>
...