Decimal arithmetic in Javascript

Question

I'm using javascript to implement some animation to my nav bar. I would like to change the style of the buttons when overing over and out of them.

I'm doing it with setInterval increasing by 1 until it reaches the value that I need. The first CSS property works fine as its value is an integer (padding). In no way I can get the same result with "font-size" probably due to decimal arithmetic as I increase by 0.1

In this case, when I hover over the main button I'd like to change the font size from 1rem to 1.5rem but when the browser start to change styling it never stops as I guess it never matches the clearInterval value.

function padIn() {

var pos = 25;
   var id = setInterval (frame, 50);
   function frame() {

      if (pos == 21) {
      	  clearInterval(id);
      }	else {
      	  pos--;
      	  el.style.padding = pos + "px";
      }

   }

   var pos2 = 1;
   var id2 = setInterval (frame2, 50);
   function frame2() {

      if (pos2 == 1.5) {
      	  clearInterval(id2);
      }	else {
      	  (pos2 += 0.1).toFixed(2);
      	  el.style.fontSize = pos2 + "rem";
      }

   }

}

function padOut() {

   el.style.color = "white";
   el.style.fontSize = "1rem";
   el.style.padding = "25px";

}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: lightblue;
	position: relative;
}

#nav {
	background-color: orange;
}

#nav li {
	list-style-type: none;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
	padding: 25px;
	font-weight: 700;
}

#nav li:first-child {
	background-color: red;
	color: white;
}

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

I tried already with Jquery and it works fine. I just want to make it happen with javascript. What is wrong with it? thx

Answer 1

One option is to just settle for "greater than or equal to":

if (pos2 >= 1.5) {

function padIn() {

var pos = 25;
   var id = setInterval (frame, 50);
   function frame() {

      if (pos == 21) {
      	  clearInterval(id);
      }	else {
      	  pos--;
      	  el.style.padding = pos + "px";
      }

   }

   var pos2 = 1;
   var id2 = setInterval (frame2, 50);
   function frame2() {

      if (pos2 >= 1.5) {
      	  clearInterval(id2);
      }	else {
      	  (pos2 += 0.1).toFixed(2);
      	  el.style.fontSize = pos2 + "rem";
      }

   }

}

function padOut() {

   el.style.color = "white";
   el.style.fontSize = "1rem";
   el.style.padding = "25px";

}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: lightblue;
	position: relative;
}

#nav {
	background-color: orange;
}

#nav li {
	list-style-type: none;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
	padding: 25px;
	font-weight: 700;
}

#nav li:first-child {
	background-color: red;
	color: white;
}

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

Answer 2

Welcome to the wonderful world of float precision.

1.5 could actually end up being 1.5000000001 and that does not equal 1.5. I recommend you read https://blog.chewxy.com/2014/02/24/what-every-javascript-developer-should-know-about-floating-point-numbers/

By changing your equals == to >= you fix your problem,

But I'd recommond to you use css and transitions http://css3.bradshawenterprises.com/transitions/

function padIn() {

var pos = 25;
   var id = setInterval (frame, 50);
   function frame() {

      if (pos >= 21) {
      	  clearInterval(id);
      }	else {
      	  pos--;
      	  el.style.padding = pos + "px";
      }

   }

   var pos2 = 1;
   var id2 = setInterval (frame2, 50);
   function frame2() {

      if (pos2 >= 1.5) {
      	  clearInterval(id2);
      }	else {
      	  (pos2 += 0.1).toFixed(2);
      	  el.style.fontSize = pos2 + "rem";
      }

   }

}

function padOut() {

   el.style.color = "white";
   el.style.fontSize = "1rem";
   el.style.padding = "25px";

}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

html {
	font-size: 16px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: lightblue;
	position: relative;
}

#nav {
	background-color: orange;
}

#nav li {
	list-style-type: none;
	display: inline-block;
	font-family: "Ubuntu", sans-serif;
	padding: 25px;
	font-weight: 700;
}

#nav li:first-child {
	background-color: red;
	color: white;
}

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>

Answer 3

You could use a smaller or equal comparison

if (pos <= 21) {

or a greater or equal comparison

if (pos2 >= 1.5) {

to prevent exact numbers, because of floating point math.

function padIn() {
    var pos = 25;
    var id = setInterval(frame, 50);
    function frame() {
        if (pos <= 21) {
            clearInterval(id);
        } else {
            pos--;
            el.style.padding = pos + "px";
        }
    }

    var pos2 = 1;
    var id2 = setInterval(frame2, 50);
    function frame2() {
        if (pos2 >= 1.5) {
            clearInterval(id2);
        } else {
            (pos2 += 0.1).toFixed(2);
            el.style.fontSize = pos2 + "rem";
        }
    }
}

function padOut() {
    el.style.color = "white";
    el.style.fontSize = "1rem";
    el.style.padding = "25px";
}

var el = document.getElementById("nav").firstChild.nextSibling;
el.addEventListener("mouseover", padIn, false);
el.addEventListener("mouseout", padOut, false);

html { font-size: 16px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: lightblue; position: relative;}
#nav { background-color: orange; }
#nav li { list-style-type: none; display: inline-block; font-family: "Ubuntu", sans-serif; padding: 25px; font-weight: 700; }
#nav li:first-child { background-color: red; color: white; }

<nav role="navigation">   
        <ul id="nav">
    	    <li>Main</li>
    	    <li>About</li>
    	    <li>Our Hostels &#9660</li>
    	    <li>Our Services &#9660</li>
    	    <li>Contact</li>
    	    <li id="close"><strong>X</strong></li>
        </ul>
    </nav>