Замените атрибут sr c изображения из текстового поля в форме

Question

Я пытаюсь найти способ загрузки изображения из каталога после того, как пользователь вводит текст в текстовое поле с помощью кнопки отправки. (просто поместите кнопку поиска, которая отображает результат) Однако у клиента нет базы данных, и он не хочет обновлять свои устаревшие настройки (снимки сделаны в парке развлечений и отправлены через FTP в папку на его сервере). Его текущий сайт находится в php. Моя сложность заключается в создании современного сайта с возможностью для клиента искать свое изображение на своем сайте. Мне было интересно, можно ли было изменить атрибут изображения sr c в зависимости от того, что клиенты пишут в текстовом поле, которое они отправляют. (Если возможно, изменение атрибута изображения также позволит избежать перезагрузки страницы каждый раз, когда кто-то выполняет поиск?)

Answer 1

Хотя это звучит как плохая настройка, вы определенно можете изменить атрибут sr c элемента с помощью javascript в зависимости от взаимодействия с пользователем.

Сначала вам нужно поместить прослушиваемое событие на вход элемент, который вы хотите просмотреть

let myInput = document.getElementByID('whateverYourIDis')
myInput.onchange = function(){ 

let theImage = document.getElementById('idOfImage')

let searchTerm = myInput.value;
theImage.src = searchTerm;
  }

Это просто изменит атрибут sr c, чтобы он стал равным независимо от того, какие пользовательские типы вводятся во вводе, вам нужно добавить некоторый код, чтобы использовать значение ввода для поиска ваша файловая структура для соответствующего файла