Is it wrong to store a number inside an HTML tag?

user_16734970 0
Viewed 101

I'm learning how to integrate Javascript into HTML, and I had an idea for some odd code. I can't say for certain if there is something wrong with it.

My goal was to create a counter that is displayed on the page that starts at 1 and increases every time a function is called.

My original code was something like this:

<p id="counter"></p>

<script>
var turn = 1, turn_counter = document.getElementById('counter');
turn_counter.innerHTML = turn;

function increase() {
  turn++
  turn_counter.innerHTML = turn;
}
</script>

The variable turn would keep track of a number, and turn_counter would keep track of the <p> tag. The contents of this tag were then set to turn. When the function increase() was called it would increment turn and then adjust the tag to match.

However I realized there was a potential simpler solution:

<p id="counter">1</p>

<script>
var turn_counter = document.getElementById('counter');

function increase() {
  turn_counter.innerHTML++
}
</script>

This writes "1" inside the <p> tag and then sets the variable turn_counter to that tag. Then whenever the increase() function is called it simply increases the number inside the tag.

While both solutions work, I feel like there must be some problem with using the second one. Something about storing a variable inside an HTML tag doesn't feel right. So are there any problems with the second solution?

(Also if there are any better ways of doing this I'd be open to them. I'm still very new to this.)

html javascript
1 Answers

While with the first solution you are actually storing a variable in Javascript in the second example you are making use of Javascript "quirks" but it's probably not what you wanted.

When you read the innerHTML of the counter div, Javascript finds a string number, as "1" but since "1" is shallow equal to 1, Javascript tries to apply mathematics to it and does what you asked.

Is it working? Yes. Is it bad? Also yes.

But why is it working? It's working because of Javascript's type coercion and type casting based on that.

Why is it bad? It's not bad because of type coercion, it's not good because of the fact that you are saving your application state on the UI layer which is doable but not a good op.

You are not storing a variable in this case, you are just making use of Javascript weird behaviors. You could potentially parse the innerHTML to turn it into a number but it's yet far from a solution as you wouldn't properly save "state" for your javascript application, which is where to logic resides!

You could see HTML as the UI layer (unstyled) but you want to keep the logic (like variable declaration and usage) inside Javascript.

As proposed by @GrafiCode in the comments, you could

const whatAmI_1 = div.innerHTML + 1
const whatAmI_2 = div.innerHTML++

typeof whatAmI_1 // string, 11
typeof whatAmI_2 // number, 2

This is because the increment operator (++) parses the string, casts it to a number and applies the necessary incrementation while the + 1 is seen as a concatenation of strings as the second value (+1) gets parsed and casted to string by Javascript.

@Wiktor Zychla noted that maybe the word "quirks" is not explicative enough about the choices made by Javascript. Type coercion is not something bad or wrong, it's part of Javascript and if you know what it is and how to use it, you can do a lot of things.

user_72733480
Related