Show Me Your ID

Share This Post

Today, I want to discuss interacting with your HTML content. Many times in JavaScript programming, we wish to interact/affect our HTML content in some fashion. We may want to add, remove or change content. So how do we go about doing that? TO accomplish this, we need to set up our HTML correctly and then code our JavaScript for our HTML. Let’s look at how we might do that…

In HTML, we need to ensure we set up our structure of our content appropriately. One aspect of this is utilizing the ID attribute. WHen I build web apps, I usually ID and class (which we will talk about in a future post) a ton of stuff. This allows me to utilize not only proper JavaScript coding, but also CSS to make  my apps ‘prettified’. So what does this ID attribute look like?

[code lang=”html”]
<div id="myDiv">
Some content…
</div>
[/code]

As you can see, I have an ID attribute on my div entitled, ‘myDiv’. We can put IDs on virtually any HTML tag. The only real rule is that each ID needs to be unique on a page. In other words, I cannot have two ‘myDiv’ IDs on the same HTML page.

So how does this work with JavaScript? We, we can grab that tag element by the ID and do what we want with it. We do this by using the getElementById() method. Here’s an example…

[code lang=”js”]
// Create variable to hold myDiv div
var myVar;
// Grab myDiv and put it into myVar
myVar = document.getElementById("myDiv");
[/code]

What the above code does is grab the myDiv div and stick it into the myVar variable. Another way of reading line four (4) is to say, “Go into my document, get the element with the ID of myDiv.” All we need to do is pass the ID we want to grab to the getElementById() method. So what good does this do us? Now that we have it sitting in a variable, we can manipulate the content using that variable as a vehicle. As I stated earlier, we can add/change/delete content. In JavaScript coding, you will find that you will use this method very often.

Happy Coding!

Clay Hess

 

More To Explore

Code

Demystifying Scrum User Stories Confirmation: Ensuring Quality and Collaboration

One of the key elements of Scrum is the use of user stories to define the requirements of a system or feature from the perspective of the end user. As teams work through the product backlog, it becomes crucial to confirm the user stories to ensure they meet the desired criteria and are ready for development. In this blog post, we’ll explore the concept of Scrum user stories confirmation and its significance in delivering high-quality products.

Code

The Power of Conversations in Scrum User Stories

At the heart of Scrum lies the concept of user stories, which serve as a means of capturing requirements from the perspective of end-users. However, the true power of user stories lies not just in their written form but also in the conversations that take place around them. In this blog post, we will explore the significance of conversations in Scrum user stories and how they contribute to the success of Agile projects.

Do You Want To Boost Your Business?

drop us a line and keep in touch

Scroll to Top
small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.