Show Me Your ID

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

computer, laptop, work place-2982270.jpg
Code

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

lighthouse, beacon, atlantic-8578318.jpg
Code

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post

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.