Как JavaScript связывается с DOM-элементами, например input и кнопкой, после загрузки скрипта?

Скрипт получает ссылки на существующие узлы через DOM API и назначает обработчики событий; имена HTML-элементов не связываются с переменными автоматически.

Например, document.querySelector('#submit') возвращает элемент или null, затем addEventListener('click', handler) регистрирует callback. Нужно дождаться появления разметки: использовать defer, module, DOMContentLoaded или подходящее размещение скрипта. Значение input читают через его value; не полагайтесь на неявные глобальные переменные по id.