How to make text bigger with Js via onclick?

JavaScript
1

Can someone please help me understand how to make text bigger/smaller with javascript, by using the onclick method?

I want to be able to see HTML on a web browser like this:

Hello World
+
-

I should be able to click the “+” and the “-” to make the “Hello World” text appear larger and smaller on my browser.

This is bugging me, I would greatly appreciate the help to figure out how you can do this!

1 Like
3 
<html>
<head>
    <title>Events</title>
<script src="main.js" defer></script>
<link rel= "stylesheet" href ="style.css"/> 
</head>   
<body>
    <div id= "result" >Hello World</div>
    <div id = "bigger"> + </div>
    <div id = "smaller"> - </div>
</body>
</html>

function big () {
    document.getElementById("result");
   
}


function small () {
   document.getElementById ("result");
}



bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
4

This is where I’m at. I’m just not sure how to make the functions actually make my result id bigger/smaller

7

Thank you very much, I’m making some progress here.

That first solution is a bit over my pay grade at the moment :joy:
I declared a local variable instead, which worked. How could I set this to occur incrementally, indefinetly? If that makes sense?

function big () {
    document.getElementById("result").style.fontSize = "xx-large";
   
}


function small () {
  var adjustText= document.getElementById("result").style.fontSize = "small";
}



bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
8

Oops, I declared a local variable in one place, perhaps unnecessary though?

10

That makes sense to ensure I style in CSS but No, I just used those 3 sizes at the moment, pending a different solution. Ideally, I would like to be able to write the functions in such a way that every time you click the + or - it will incrementally increase/decrease the font 10px, lets say. I think this is what you were alluding to in your second solution? But I’m not sure I understand how to implement?

11 
var adjustText = document.getElementById('result').style.font++;

var adjustTextSmall=document.getElementById('result').style.font--;

function big () {
    document.getElementById("result") = adjustText;
   
}

function small () {
  document.getElementById("result").style.fontSize = adjustTextSmall;
    
}



bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
12

I tried this, didn’t work but maybe you can see what I’m trying to do?

14

Ok, I’ll give this a try thank you!

16

You said:

Can you please clarify this?

18 
var currTextSize = document.getElementById('result'); 

currTextSize.style.fontSize = '20px';


function big () {
  document.getElementById ("result").style.fontSize = currTextSize + '10px';
   
}


function small () {
  document.getElementById ("result").style.fontSize = currTextSize - '10px';
}



bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
19

So what do I still need to do here?

21 
let currTextSize = "20px";

currTextSize + "10px"; // "20px10px"

This is what the value of your font-size property will look like with your current code.

23

var result = document.getElementById(“result”);

var currTextSize = 20;

result.style.fontSize = currTextSize + ‘px’;

24

How does that look? I am still having trouble though.

25 
var result = document.getElementById("result"); 

var currTextSize = 20;

result.style.fontSize = currTextSize + 'px';

function big () {
  currTextSize + 10;
}


function small () {
  currTextSize - 10;
}



bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
27

Oh my gosh, I think I did it. Thank you so much for your help!!!

var result = document.getElementById("result"); 

var currTextSize = 20;

result.style.fontSize = currTextSize + 'px';

function big () {
 ++currTextSize;
result.style.fontSize = currTextSize + 'px';
}


function small () {
--currTextSize;
result.style.fontSize = currTextSize + 'px';
}



bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
1 Like
28

Anything you would do diff here?

30

Awesome, that makes sense! Thanks a lot Randell!

function big () {
    ++currTextSize;
    adjustText ();
}


function small () {
    --currTextSize;
    adjustText ();
}

function adjustText () {
    result.style.fontSize = currTextSize + 'px';
}

var result = document.getElementById("result"); 

var currTextSize = 20;

adjustText ();

bigger.addEventListener ("click", big);
smaller.addEventListener ("click", small);
32

I’m thinking an else/if statement? This would include currTextSize+=10 and currTextSize-=10, perhaps?

Not sure of syntax for onclick method in this scenario though?

function adjustText () {
    
    result.style.fontSize = currTextSize + 'px' +;

if (onclick.bigger) {currTextSize += 10;

}  else if (onclick.smaller) 

{currTextSize -= 10;

}   

}};

var currTextSize = 20;
var result = document.getElementById("result"); 
var bigger = document.getElementById("bigger"); 
var smaller = document.getElementById("smaller"); 

adjustText ();

bigger.addEventListener ("click", adjustText);
smaller.addEventListener ("click", adjustText);