Using JavaScript to pass attributes to HTML tags

Recently while building a Mutual Fund calculator , I realized the importance of using JavaScript to pass attributes to HTML tags. Here’s the problem that I ran into:

I first built the calculator on repl.it. The idea was to port the codes to this blog by adding a short-code to the standard theme. Why so ? This entire blog uses an uniform theme that allows me to create content without worrying about the technical technical nuts & bolts. If I have to add a custom code, I prefer adding it as block (instead of editing the theme).

However, there is a limitation in my approach. I cannot port an entire HTML page into a block. All I can do is port the relevant code block. In case of the mutual fund calculator it would be the div block that housed the calculator & the result section. This led to a challenge. In the original code I had passed a critical attribute to the body tag. That was lost! In the blog the body tag is a part of the theme. The moment I edit the theme & tamper the body tag directly I run the risk of messing up the site.

I did some reading around & realized that my only way out was to use JavaScript to pass the attribute to the body tag. So what did I do ?

How to add HTML attribute using JavaScript ?

In an HTML page , JavaScript are passed using the script tag. There are 2 options available. I can either write the entire code inside the script tag OR write the code in a separate file (say script.js) & link it on the script tag using the “src” attribute. Something like this:

<script src='script.js'></script>

In the below explanation I will pass the code directly under the tag.

Before we get to the code. It’s important to understand communication between the HTML script & the JavaScript code. It’s through an interface called the DOM (document object model). I will write a separate article of DOM. For now imagine that the HTML document is considered an object by the JavaScript. The various tags are also considered as objects. Thus body is an object & so is table.

An object contains properties & methods. There are some associated with these DOM objects well. The attributes that we pass to the tags are properties of the corresponding object .

Thus,

<H1 style={"color":"red"}></H1>

Can be represented as :

<script>
var k=document.getElementsbyTagName("h1");
for(var i = 0; i < k.length; i++) {
   k[i].style.color = "red"}
</script>

Here’s the explanation:

  • The document object has a method called “getElementsbyTagName()” , that pulls out a list of all the elements with a particular tag (in this case h1).
  • The for loop, now loops through this list & does “something” to each of the elements.
  • To understand the “something “, we must understand that each of the elements are also objects. Thus, “h1” is an object , with a property called “style”. “style” again is an object with a property called “color”.
  • The code simply accessed this property & sets it to red.

I wouldn’t blame you – if you are considering the above method as a tedious attempt to over-complicate things! It’s definitely simpler to pass stuff as attributes to the tag directly. Unfortunately it may not be suitable in all scenarios. I have list down 3 situations where JavaScript bails you out:

Using JavaScript to pass attributes without modifying theme

I explained what led me to understand JavaScript based modification of HTML code. Simply put we can use JavaScript to update html tags that are can’t be accessed easily. Example: The “body” tag would be a part of the theme , thus to add an attribute to the same we would need the help of JavaScript:

<script> document.body.onload = dosomething() </script>

Using JavaScript to pass validations can avoid browser specific issues

Not all browsers support all HTML tag attributes. Especially when it comes to form elements, there are a whole bunch of validation attributes that aren’t supported universally . In such cases passing the validation using JavaScript makes the code robust & Scalable.

Using JavaScript to improve user experience

When it comes to building forms, pure html may not be enough. For example, we may want to pass to a specific currency format or a phone number format to the input field. In such cases we would need to use a basic input type & then use JavaScript to convert it to our desired format.

Leave a Reply

Your email address will not be published. Required fields are marked *