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

You can use >= 21 for the condition

Ezenhis
– Ezenhis

2017-08-09 14:53:18 +00:00
Commented Aug 9, 2017 at 14:53 — Ezenhis
– Ezenhis, Commented Aug 9, 2017 at 14:53
Any particular reason for not using CSS animations?

Nisarg Shah
– Nisarg Shah

2017-08-09 14:54:10 +00:00
Commented Aug 9, 2017 at 14:54 — Nisarg Shah
– Nisarg Shah, Commented Aug 9, 2017 at 14:54
No particular reason. I'm just practicing with Javascript

Dema
– Dema

2017-08-09 17:15:18 +00:00
Commented Aug 9, 2017 at 17:15 — Dema
– Dema, Commented Aug 9, 2017 at 17:15

Jamiec · Accepted Answer · 2017-08-09 14:55:57Z

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>

answered Aug 9, 2017 at 14:55

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dema Over a year ago

Thanks @Jamiec for the hint. Can you guess why did I get a bad mark for my question?

Nina Scholz · Accepted Answer · 2017-08-09 14:54:33Z

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>

Tschallacka · Accepted Answer · 2017-08-09 14:55:44Z

0

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>

answered Aug 9, 2017 at 14:55

Tschallacka

28.9k15 gold badges99 silver badges140 bronze badges

2 Comments

Dema Over a year ago

I didn't know CSS transition could have all these effects. Thanks for the link. Can you guess why did I get a bad mark for my question?

Tschallacka Over a year ago

probaly because they downvoter thought it was a case of XY problem. But, your question was well phrased within the concepts you understood and had a verifyable example. Don't let downvotes get you down, sometimes people downvote just on the happenstance of just downvoting. It's a well phrased question, but in essence an xy problem.

Collectives™ on Stack Overflow

Decimal arithmetic in Javascript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related