Increment is not working correctly in for loop

Question

Js is reading the i+=2 in the for loop as

4002

instead of adding 2+400 which should be 402. The increment is not in quotes so I don't know why it is doing that.

function move(evt) {
  var text = evt.target;
  var currentSize = text.getAttribute("font-size");
  var timer = 0;
  for (let i = currentSize; i < 11000; i += 2) {
    function changeText() {
      text.setAttribute("font-size", i);
      console.log(i);
    }
    setTimeout((changeText), timer);
    timer = timer + 40;
  }

.container {
  background-color: yellow;
  z-index: 7;
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: .5;
}

<div class="container">
  <svg height="100%" width="100%">
            <text onclick="move(evt)" dx="0%" dy="50%" font-size="400">This is my Journey
            </text>
        </svg>
  </container>

`i` must be a string, not a number. Does `text.getAttribute("font-size")` return a String? — Carcigenicate, Jul 05 '19 at 16:05
Use `var currentSize = parseInt(text.getAttribute("font-size"))` or `var currentSize = parseFloat(text.getAttribute("font-size"))`. Kudos to @Carcigenicate. — collapsar, Jul 05 '19 at 16:09
This seems like a duplicate of https://stackoverflow.com/a/15195345/125981 to me here. — Mark Schultheiss, Jul 05 '19 at 20:24

score 0 · Accepted Answer · answered Jul 05 '19 at 20:13

It's just as @Carcigenicate and @collapsar said on the comments; try parsing currentSize as a number.

  function move(evt) {
    var text = evt.target;
    var currentSize = parseInt(text.getAttribute("font-size")); // <- Parse the currentSize as int
    var timer = 0;
    for (let i = currentSize; i < 11000; i += 2) {
      function changeText() {
        text.setAttribute("font-size", 58);
        console.log(i);
      }
      setTimeout((changeText), timer);
      timer = timer + 40;
    }
  }

Increment is not working correctly in for loop

1 Answers1