Change font size of element with JS

Question

I'm new to JS. My goal is to make the font-size of an HTML element increase as a function in JS loops.
I have gotten getElementById to find the element by ID, my function loops ok and I have a variable increasing each time it loops, but the element is still not changing.

My JavaScript

let i = 0;
var myvar = setInterval(IconWeeder, 1500);
var element = document.getElementById("myDIV");

function bring_er_down() {
  clearInterval(myvar);
  console.log("we stopping")
}

function IconWeeder() {
  element.style.fontSize = i;
  i == i++
    console.log("i is equal to:", i)
  console.log(element)
}

<head>
  <title>Font Size</title>
</head>
<p id="myDIV">I should change size</p>
<input type="button" value="stop" onclick="bring_er_down()"></input>
<script src="icons.js"></script>

Thanks!

Calvin Nunes · Accepted Answer · 2020-03-13T17:32:05.933

What you need is to inform the type of unit the font-size should use, for example "px": element.style.fontSize = i + "px";

Also i == i++ is not doing what you think it is, it is working since i++ will increase the i, but you don't need that comparision check ==, you just need i++; that is the same of i += 1;

See working example below:

let i = 0;
var myvar = setInterval(IconWeeder, 250);
var element = document.getElementById("myDIV");
element.style.fontSize = i + "px";

function bring_er_down() {
  clearInterval(myvar);
  console.log("we stopping")
}

function IconWeeder() {
  element.style.fontSize = i + "px";
  i++;
  console.clear()
  console.log("i is equal to:", i)
  console.log(element)
}

<p id="myDIV">I should change size</p>
<input type="button" value="stop" onclick="bring_er_down()" />

Note: input is a self closing tag, so, there isn't </input>, it doesn't exist, you close the input by .../>

score 1 · Answer 2 · answered Mar 13 '20 at 17:22

There are few issues in the code:

Wrong syntax of input tag
The value of i is not incremented in correct way.

I have fixed the code, please find it below:

let i = 0;
var myvar = setInterval(IconWeeder, 500);
var element = document.getElementById("myDIV");

function bring_er_down() {
  clearInterval(myvar);
  console.log("we stopping")
}

function IconWeeder() {
  element.style.fontSize = i + 'px';
  i++;
}

<p id="myDIV">I should change size</p>
<input type="button" value="stop" onclick="bring_er_down()" />

Change font size of element with JS

2 Answers2