Как я могу вставить функцию, которая позволяет пользователю определять URL в зависимости от того, что они ввели в поле поиска

Question

В настоящее время я создаю что-то для работы, и у меня есть 2 поля для текстового поля, в которые пользователь может ввести некоторый текст, а затем кнопка «Просмотреть отчет»

Что я хотел бы получить, когда кнопка нажатапользователь перенаправляется на URL-адрес, который выглядит примерно так: http://example.com/reports/example/reports/TEXTFIELD1/reports/example/TEXTFIELD2/reports.aspx

Так что URL остается неизменным, за исключением двух бит, которые вводит пользователь для определения URL

У меня было нечто подобное раньше, когда у меня была java-функция onclick, которая переводила пользователей на http://example.com/TEXTFIELD1, но я не уверен, переносима ли это на мою текущую проблему, так как у меня есть несколько частей URL, которые я хочуредактировать и похоронены в длинном URL

Вся помощь оценена, и я надеюсь, что я объяснил это достаточно ясно, если нет, пожалуйста, дайте мне знать, и я постараюсь предоставить больше контекста

Answer 1

Глядя на ваше перо, я увидел некоторые проблемы, которые привели к сбою вашего кода.

Я приложу все усилия, чтобы объяснить, почему.

var fieldOne = document.getElementById(‘field-one’).innerHTML
var fieldTwo = document.getElementById(‘field-Two’).innerHTML

let button = document.getElementById('button');

button.addEventListener('click', () => {
   window.location.href = ‘www.website.com/reports/‘ + fieldOne +       ‘/reports/‘ + fieldTwo + ‘/reports.aspx’
});

Итак, прежде всего вы можетене используйте эти кавычки в JS.Используйте один из этих '' `.

Вторая проблема, с которой вы сталкиваетесь, заключается в том, что вы неверно получаете значения полей двумя способами. Чтобы получить значение поля ввода, вы должны использовать .value вместо .innerHTML.

Другая проблема заключается в том, что вы получаете значение поля ввода, когда документ готов -> поэтому они всегда пусты.

Кроме того, вы написалиfield-Two, который должен быть field-two (JS чувствителен к регистру)

Помимо этих ошибок, ваш код должен работать. Поэтому позвольте мне переписать его:

let button = document.getElementById('button');

button.addEventListener('click', () => {
  var fieldOne = document.getElementById('field-one').value
  var fieldTwo = document.getElementById('field-two').value

  var url = `www.website.com/reports/${fieldOne}/reports/${fieldTwo}/reports.aspx`;
  // or
  var url = 'www.website.com/reports/'+ fieldOne +'/reports/'+ fieldTwo +'/reports.aspx';
  window.location.href = url;
});

Как вывидите, я сохраняю URL в переменной. Это не обязательно, но я предпочитаю делать это для простоты кода. Есть также 2 различных способа объявить его. Оба работают, это ваш выбор, который вы предпочитаете (обратите внимание на различные кавычки, независимо от того, используете ли вы шаблонные литералы или нет)

Answer 2

Вы можете использовать Шаблонные литералы для создания своей ссылки или просто использовать "+".

document.location.href = `http://example.com/reports/example/reports/${TEXTFIELD1}/reports/example/${TEXTFIELD2}/reports.aspx`

или

document.location.href = "http://example.com/reports/example/reports/" + TEXTFIELD1 + "/reports/example/" + TEXTFIELD2 + "/reports.aspx"

, где TEXTFIELD1 и TEXTFIELD2 являются значениямииз ваших текстовых полей.