How do I change the font of a javascript variable?

Question

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.

I think he wants to do it with javascript, to change the font dynamically, is that right? — roberrrt-s
– roberrrt-s, Commented Aug 23, 2016 at 13:11
I think you are studying from a book written in 2005. Do not use center (also, you seem to have forgotten to close that tag). Do not use the font tag--we use CSS for that these days. — user663031
– user663031, Commented Aug 23, 2016 at 13:16

baao · Accepted Answer · 2016-08-23 13:38:24Z

1

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

edited Aug 23, 2016 at 13:38

answered Aug 23, 2016 at 13:16

baao

73.5k18 gold badges152 silver badges209 bronze badges

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

1 Comment

John Mann Over a year ago

Thank you very much! I did not expect to get answers beyond what I was even expecting in so little time! Thank you!

sdabet · Accepted Answer · 2016-08-23 13:11:54Z

0

Add some CSS to style the element:

<style>
    #clickCount {
        color: red;
        font-family: Gill Sans Extrabold, sans-serif;
    }
</style>

answered Aug 23, 2016 at 13:11

sdabet

19.2k11 gold badges96 silver badges165 bronze badges

Comments

AndrewLeonardi · Accepted Answer · 2016-08-23 13:13:06Z

0

You can add a function that is called on click which can update your css. Try this

<button onclick="myFunction()"> Click me </button>


 function myFunction()
    {
        document.getElementById('clickCount').setAttribute("class", "style1");
    }

Here is some more info on .setAttribue: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

answered Aug 23, 2016 at 13:13

AndrewLeonardi

3,51211 gold badges60 silver badges111 bronze badges

Collectives™ on Stack Overflow

How do I change the font of a javascript variable?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related