John Parkinham John Parkinham - 3 months ago 8
Javascript Question

Javascript/Html: How do I change the size of the font/font itself, not just the color?

This is a chunk of code I have that creates a button which adds to a variable that is made visible. I would like to be able to know how to change the font size of the displayed variable. I am making a game similar to cookie clicker.

<div class="game-object">
<script type="text/javascript">
var clicks = 0;

document.getElementById("push").addEventListener("click", updateClickCount);

function updateClickCount() {
var el = document.getElementById("clickCount");
el.innerHTML = clicks;
el.style.color = '#'+Math.floor(Math.random()*16777215).toString(16);
}
</script>

<button type="button" onClick="clicks++;updateClickCount();" id="push" style="width:400px;height:60px;"><font size="5" face="verdana" color="white">Click me for Cola!</font></button>
<div id="clickCount"></div>




How do you set the font size of the variable, and how do you change the font?

Answer

As said earlier, don't use inline javascript (nor inline css). To change the font-size, simply use el.style.fontSize

var clicks = 0;

document.getElementById("push").addEventListener("click", updateClickCount);

function updateClickCount() {
var el = document.getElementById("clickCount");
clicks++;
el.innerHTML = clicks;
el.style.color = '#'+Math.floor(Math.random()*16777215).toString(16);
el.style.fontSize = '200px';
}
#push {
  width:400px;
  height:60px;
  font-size: 2em;
  color: white;
}
<div class="game-object"></div>


<button type="button" id="push">Click me for Cola!</button>
<div id="clickCount"></div>

Comments