Как сделать цикл с Javascript, который проходит через каждое значение текстового поля HTML в форме - PullRequest
Новая
       2

Как сделать цикл с Javascript, который проходит через каждое значение текстового поля HTML в форме

0 голосов
/ 11 октября 2018

Я создаю форму, которая имеет два поля ввода текста для значений URL.Цель формы - объединить значения URL-адресов в поле 1 (Начальный URL-адрес) со значениями URL-адресов в поле 2 (Закрывающий URL-адрес);Каждый начальный URL имеет уникальный закрывающий URL.Если у пользователя есть несколько пар начальных и конечных URL-адресов, я должен был бы сделать цикл, но у меня возникли проблемы с этим.Итак, скажем, у пользователя есть 2 пары URL, которые он хочет объединить вместе.Пользователь вводит каждое значение URL в соответствующие поля с одним пробелом, отделяющим каждый начальный и закрывающий URL друг от друга.После нажатия кнопки «сцепить» каждая пара начальных и конечных URL-адресов должна выдавать уникальный URL-адрес в элементе «results» hmtl.Итак, например , скажем, у пользователя есть две следующие пары начальных и конечных URL-адресов в форме:

Начальные URL-адреса: https://www.google.com/ https://www.microsoft.com/en-us/

Закрывающие URL-адреса: https://mail.google.com/mail/u/0/ https://outlook.live.com/owa/

После нажатия кнопки «объединить» цель состоит в том, чтобы увидеть следующие две строки объединенных URL-адресов под «результатами»: 

https://www.google.com/&URL=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F%20

https://www.microsoft.com/en-us/&URL=https%3A%2F%2Foutlook.live.com%2Fowa%2F

Используется функция «encodeURIComponent»кодировать каждый закрывающий URL, который вводит пользователь.Пожалуйста, дайте мне знать, если вы можете помочь или нужна какая-то ясность.Код работы приведен ниже. 

function concatenate() {
  var a = document.getElementById('url1').value;
  var b = document.getElementById('url2').value;
  var index;
  var res1 = a.split(" ");
  var res2 = b.split(" ");
  for (index = 0; index < a.length; index++)
    text += "<li>" + res1[index] + "&url=" + encodeURIComponent(res2[index]) + "</li>";
}
}
document.getElementById('result').innerHTML = text
}
<!DOCTYPE html>
<html>

<body>
  <form id="concatenationform" method=post>
    <h2>Tag Concatenation Form</h2>
    <p>Enter Starting URL(s) Below
      <br>
      <input type=text id=url1 name=url_1 size=50>
      <br>
      <p>Enter Closing URL(s) Below
        <br>
        <input type=text id=url2 name=url_2 size=50>
        <br>
        <button onclick="return concatenate()">Concatenate</button>
      </p>
      <br>
      <p id="results"></p>
  </form>

</body>

</html>

1 Ответ

0 голосов
/ 11 октября 2018

Здесь много проблем, как показано ниже: 1. Брекеты не совпадают.2. Кнопка отправляет форму 3. Текст не определен 4. Цикл для длинной строки, которая приводит к повторению каждого символа

Вот фиксированный код, основанный на проблемах, упомянутых выше:

html (тип кнопки - кнопка, поэтому нет отправки, нет возврата): 

<form id="concatenationform" method=post>
  <h2>Tag Concatenation Form</h2>
  <p>Enter Starting URL(s) Below
    <br>
    <input type=text id=url1 name=url_1 size=50>
    <br>
    <p>Enter Closing URL(s) Below
      <br>
      <input type=text id=url2 name=url_2 size=50>
      <br>
      <button type="button" onclick="concatenate()">Concatenate</button>
    </p>
    <br>
    <p id="results"></p>
</form>

Javascript (фиксированные скобки, объявленный текст и циклический просмотр массива): 

function concatenate() {
  var a = document.getElementById('url1').value;
  var b = document.getElementById('url2').value;
  var index;
  var text = '';
  var res1 = a.split(" ");
  var res2 = b.split(" ");
  for (index = 0; index < res1.length; index++) {
    text += "<li>" + res1[index] + "&url=" + encodeURIComponent(res2[index]) + "</li>";
  }

  document.getElementById('results').innerHTML = text;
}

JSFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...