Document.getElementByID(id) возвращает несуществующий узел ⇐ Html

[Anonymous]

У меня есть функция, которая выбирает iframe с помощью document.getElementById(id) и меняет его источник на основе другого параметра. Я сталкиваюсь со странным поведением этой функции, когда она вызывается с использованием атрибута onsubmit тега HTML : элемент, который находится с помощью getElementById, на самом деле не существует. Он существует в HTML-документе, и когда я записываю его в консоль, элемент, который, по его мнению, выбран, является правильным тегом HTML, но стрелку, открывающую раскрывающийся список свойств, невозможно щелкнуть, и когда я иду выделить узел в инспекторе DOM, ничего не выделяется. Кроме того, атрибут src реального iframe сбрасывается до того, как он отображается в HTML до выполнения каких-либо сценариев. Когда я вызываю ту же функцию с теми же параметрами из консоли, узел выбирается правильно, и его атрибуту src присваивается новый параметр, но по какой-то причине, когда функция вызывается с использованием onsubmit, она ведет себя по-другому.
Функция:
const pages = {
test1: "value1",
test2: "value2",
test3: "value3"
};

function promptSubmit (input, dict, frame) {
const iframe = document.getElementById(frame);
console.log(iframe);
const elem = document.getElementById(input);
const selector = elem.value;
if (selector in dict) {
const source = `./pages/prompts/${dict[selector]}.html`;
console.log(`Current src: ${iframe.src} Intended new src ${source}`);
iframe.src = source;
console.log(` Source changed, current source: ${iframe.src}`)
} else {
console.log("Command unrecognised");
};
};

HTML:







./pages/temp.html



Есть идеи, почему это может происходить и как это исправить?
HTML с тегом сценария (MRE)






const pages = {
test1: "value1",
test2: "value2",
test3: "value3"
};

function promptSubmit (input, dict, frame) {
const iframe = document.getElementById(frame);
console.log(iframe);
const elem = document.getElementById(input);
const selector = elem.value;
if (selector in dict) {
const source = `./pages/prompts/${dict[selector]}.html`;
console.log(`Current src: ${iframe.src} Intended new src ${source}`);
iframe.src = source;
console.log(` Source changed, current source: ${iframe.src}`)
} else {
console.log("Command unrecognised");
};
};









./pages/temp.html





Подробнее здесь: https://stackoverflow.com/questions/799 ... esnt-exist