by Jonathan Sexton
I’ve always worked with the assumption that if I put enough time and effort towards anything, eventually I would get the outcome I desired. If I can throw enough hard work (and coffee :P) at my problem, I can build a great solution to it.
Stubbornness has and continues to be one of my best and worst attributes. I’m learning that a heavy-handed approach seldom works in the land of coding. Sometimes the situation calls for some delicate hands and finesse to achieve the best result. That is the lesson I learned, and the genesis of this article.
I’m hoping that by sharing what I’ve learned (the hard way) it’ll save you some time and frustrations. So, without further ado, here is this week’s lesson on when and where to collect information.
I’m going to make some assumptions before getting into this article, but in case I assume too much I have provided some links. If this is your introduction to any of these topics, then welcome! I’m more than happy to answer any questions you may have after checking out some information. My contact info can be found at the bottom of this article.
- You know the basics of HTML
- You know the basics of CSS
- Using the <link> tag within your HTML file to link to an external style sheet
- You understand that an HTML file is loaded (rendered) in a linear fashion, from top to bottom
Don’t worry if you aren’t familiar with everything on the list. I’ll provide you with some links throughout the article, so let’s get started.
HTML Document Rendering
Throughout this article, I’ll be referencing the code below. It’s a simple HTML template with <input> fields in which the user can provide data about how much a new (hypothetical) phone costs.
My intention here is to get the value from money and newPhone fields before manipulating those values in later iterations of my code. There’s just one problem — the way I have my code structured results in empty variable values.
When my console.log statements run, I’ll be left with undefined as values for those variables. Now why is that you might ask? Think back to how the HTML is rendered in the browser. Everything essentially waits its turn to be rendered as the browser makes its way down the HTML. So when my <input> fields are rendered, they’re empty because the user hasn’t provided any information within those fields.
Then, I select those input fields with
let money = document.getElementById("money").value;and
let newPhone = document.querySelector("#newPhone").value; respectively setting them to nothing because they have no values yet.
There are, as with all programming concepts, many different ways to accomplish this task. The method above just happens to be the way I solved it. If you have a different way and want to share it, I’d love for you to share it with me.
Of course there are more complicated situations that arise than the one I’ve outlined here. I hope this will give you a solid foundation as to when to collect data from the DOM and how your code is affected by that timing.
If you like this post or it helped you, please consider donating some claps as it helps others find my work. I’d also love to hear from you! Drop a comment or shout at me on Twitter — I’m always happy to connect with friendly faces and fellow developers!
I also have a blog where I post technical articles relating to front-end web development. You can sign up for my newsletter to stay up to date on all my writing adventures. Make sure to drop by and say hello!
As always, have a fantastic day full of coding, love, family, and happiness!