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

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

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

Предположения

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

Не волнуйтесь, если вам не все знакомо в списке. Я буду давать вам ссылки на протяжении всей статьи, так что приступим.

Визуализация HTML-документа

В этой статье я буду ссылаться на приведенный ниже код. Это простой HTML-шаблон с полями ‹input›, в которых пользователь может указать данные о том, сколько стоит новый (гипотетический) телефон.

Здесь вы можете видеть, что мой тег ‹link› в верхней части документа указывает на мою внешнюю таблицу стилей. Тег ‹script› внизу документа указывает на мой внешний файл JavaScript.

Когда этот документ отображается (см. Ссылку выше для подробного описания визуализации в браузере), таблица стилей CSS будет отображаться перед файлом JavaScript. Это потому, что значительная часть JavaScript используется для управления элементами DOM.

Если тег ‹script› находится где угодно, но не в нижней части документа HTML, то файл JavaScript будет загружен и попытается изменить элементы, которые еще не существуют. Это проблема для нас. Вот почему тег ‹script› идет чуть выше тега ‹body›.

Существуют ситуации, когда вы хотите, чтобы JavaScript загружался до этого, и поэтому он помещается в тег ‹head›. Это выходит за рамки этой статьи - просто знайте, что это возможно.

Сбор ценностей

Ниже приведен код в файле JavaScript, который соответствует тегу ‹script› в приведенном выше документе HTML.

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

Я намерен здесь получить значение из полей money и newPhone, прежде чем манипулировать этими значениями в последующих итерациях моего кода. Есть только одна проблема - то, как мой код структурирован, приводит к пустым значениям переменных.

При выполнении моих операторов console.log у меня останется undefined в качестве значений для этих переменных. Вы спросите, почему это так? Вспомните, как HTML отображается в браузере. По сути, все ожидает своей очереди для рендеринга, пока браузер продвигается вниз по HTML. Поэтому, когда мои поля ‹input› отображаются, они пусты, потому что пользователь не предоставил никакой информации в этих полях.

Затем я выбираю эти поля ввода с let money = document.getElementById("money").value; и let newPhone = document.querySelector("#newPhone").value;, соответственно устанавливая для них значение «ничего», потому что они еще не имеют значений.

После загрузки HTML мои селекторы JavaScript творит чудеса, затем пользователь изменяет (предоставляет информацию в поле) данные, но значения моих селекторов JavaScript никогда не меняются.

Решение

Решение этой проблемы простое, но мне потребовалось больше времени, чтобы понять, что я хочу признать. Я могу разместить свои переменные для этих полей ввода в моем прослушивателе событий. Это гарантирует, что данные из этих полей не будут собраны, пока не произойдет щелчок. Конечно, в это время информация будет введена в поля (после того, как HTML будет отрисован), и у нашего JavaScript не будет проблем с получением этих данных.

Как и во всех концепциях программирования, существует множество различных способов решения этой задачи. Вышеупомянутый метод оказался тем способом, которым я его решил. Если у вас есть другой способ и вы хотите им поделиться, я буду рад, если вы поделитесь им со мной.

Подведение итогов

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

Независимо от того, как вы решите конкретную проблему с помощью JavaScript, я надеюсь, что вы взяли хоть что-то из этой статьи. Если я смогу помочь вам сэкономить хотя бы пять минут вашего времени, я назову это победой.

Если вам понравился этот пост или он помог вам, подумайте о том, чтобы пожертвовать несколько хлопков, так как это поможет другим найти мою работу. Я также хотел бы получить известие от вас! Напишите мне комментарий или накричите в Твиттере - я всегда рад общению с дружелюбными людьми и коллегами-разработчиками!

У меня также есть блог, в котором я публикую технические статьи, касающиеся интерфейсной веб-разработки. Вы можете подписаться на мою рассылку, чтобы быть в курсе всех моих писательских приключений. Обязательно зайдите и поздоровайтесь!

Как всегда, желаю вам прекрасного дня, полного программирования, любви, семьи и счастья!