Динамический фильтр iframe с двумя входными полями

Ваш код кажется немного сложнее, чем ваша проблема, я объясню вам, как это исправить, и использую некоторые передовые методы в JavaScript.

Поскольку вам нужно обрабатывать значения внутри входных тегов и использовать их в теге iFrame, мы сделаем следующее:

Сначала глобальные элементы.

Поскольку нам, вероятно, нужно будет определить только один раз, какой элемент DOM является тегом iFrame, а какой — тегами input, давайте их в самом начале:

var iframe = document.getElementById('SM_SNPiFrame'),
    elements = [
        document.getElementById('salModBox'),
        document.getElementById('serNumPrefBox')
    ],
    strings = [];

Кроме того, мы определяем переменную strings, которая поможет нам хранить входные значения в том же индексе, что и массив elements.

Установите прослушиватели событий для каждого элемента.

Определив, какие элементы мы хотим использовать, теперь мы должны обработать изменение их значения. Самый быстрый эффект — использовать событие keyup, оно будет передавать значение каждый раз, когда пользователь вводит:

elements.forEach((e,index)=>{
    e.addEventListener("keyup",event=>{
    strings[index] = event.target.value;
    salModSnpFilter();
  });
});

В этом прослушивателе событий вам нужно настроить, что будет происходить каждый раз, когда это событие запускается. Я только что сделал простую функцию для сохранения нового значения в том же индексе, но в другом массиве (массиве строк).

И после этого вызовите функцию, которая обновит тег iFrame.

Сохраняйте свой код простым и функциональным.

Функция salModSnpFilter() не требует большого количества операторов if и одной и той же строки, появляющейся несколько раз для обработки нового источника iFrame. Давайте сохраним код простым:

const salModSnpFilter = () => {
    let source = "https://en.wikipedia.org/wiki/IFrame",
        finalString = "/"; //You can set it to empty: "" if you dont want slashes.
    strings.forEach(string => {
        if (string !== "") {
            finalString += string; //You can add a slash with  by adding: + "/" between the s and the semicolon.
        }
    });
    iframe.src = source + finalString;
};

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

Мы перебираем массив strings и добавляем эту строку в массив finalString в том же порядке, что и входные данные.

После этого остается только установить источник тега iFrame.

Окончательный код:

var iframe = document.getElementById('SM_SNPiFrame'),
		elements = [
      document.getElementById('salModBox'),
      document.getElementById('serNumPrefBox')
    ],
    strings = [];

elements.forEach((e,index)=>{
	e.addEventListener("keyup",event=>{
  	strings[index] = event.target.value;
    salModSnpFilter();
  });
});

const salModSnpFilter = () =>{
  let source = "https://en.wikipedia.org/wiki/IFrame",
  		finalString = "/";//You can set it to empty: "" if you dont want slashes.
  strings.forEach(string=>{
  	if (string !== ""){
    	finalString += string; //You can add a slash with  by adding: + "/" between the s and the semicolon.
    }
  });
	iframe.src = source + finalString;
};

<div>
    <input name = "textfield" type = "text" class = "guidedQueryEntry" placeholder = "Box A" name = "Box A" id = "salModBox">
</div>
<div>
    <input name = "textfield" type = "text" class = "guidedQueryEntry" placeholder = "Box B" name = "Box B" id = "serNumPrefBox">
</div>
<div>
    <iframe src = "https://en.wikipedia.org/wiki/IFrame" width = "100%" height = "600" style = "border-color:#FFCD11" id = "SM_SNPiFrame" allowfullscreen></iframe>
</div>

Примечание: Порядок строк и то, как они используются в iFrame, совпадают с порядком добавления входных данных в массив elements. Это означает, что значение inputA всегда будет идти перед значением inputB. Если вы не измените порядок в массиве elements.