John Parkinham John Parkinham - 3 months ago 11
HTML Question

How do I change the font of a javascript variable?

I am trying to make a game similar to cookie clicker. This is part of my code:



var clicks = 0;
function updateClickCount() {
document.getElementById("clickCount").innerHTML = clicks;
}

<center>
<div class="game-object">
<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>
</div>
</div>





I want to make the variable that appears on the screen after clicking the button a different font. I also want to know how to make it different colors.

Answer

Here's a solution giving your number a random new color on every click. I've changed the html from inline javascript to using an eventListener, which is what you want to use in real life

var clicks = 0;

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

function updateClickCount() {
	clicks++;
	var el = document.getElementById("clickCount");
  el.innerHTML = clicks;
  el.style.color = '#'+Math.floor(Math.random()*16777215).toString(16);
}
<button type="button" id="push">Click me for Cola!</font></button>
<div id="clickCount"></div>

Attribution: random color creation by Paul Irish