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!
Instead of just giving you the code to make this work, why don’t you try to implement it yourself first? If you get stuck, show us the code you have tried and then we can have a starting point on which to build your understanding of what to do next.
<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);This is where I’m at. I’m just not sure how to make the functions actually make my result id bigger/smaller
OK, that is a start. You have written:
document.getElementById("result");
That line by itself does not do anything. There are a few approaches you could take. Two that come to mind are;
Set the font-size property for the div with id=“result” using CSS in your style.css. Then you would have to use the window.getComputedStyle method along with the CSSStyleDeclaration.getPropertyValue method to get the actually value of the font-size property on each click. Once you have this size value, then you would need to add/subtract an amount (let’s say 10) to get a new value for the font-size and then set the fontSize proprerty using element.style.fontSize = new size.
The other approach is to create a global variable which holds the current font-size and then on click you would set the add/subtract from the variable (let’s say 10) and then set the font-size property of the text element using element.style.fontSize.
Thank you very much, I’m making some progress here.
That first solution is a bit over my pay grade at the moment 
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);
Oops, I declared a local variable in one place, perhaps unnecessary though?
OK. I understand now that you just want to toggle between 3 sizes? Normal (whatever the current size is), xx-large, and small. Is that correct? If so, then just create 2 CSS classes with the desired font-size and then use the following two methods to accomplish switching out the desired classes.
element.classList.add
and
element.classList.remove
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?
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);
I tried this, didn’t work but maybe you can see what I’m trying to do?
Yes, that is what I was alluding to. Here is the basic outline in pseudo-code
#1) Assign a starting value for the font-size to variable (call it currTextSize)
#2 ) Set the font-size property of the result element (using result.style.fontSize) to a string of the variable (make sure to include px on the end).
#) Create an event listener (DOMElement.addEventListener) for each button whose callback function would either add or subract a specified value to/from currTextSize and then set the style of the result element using element.style.fontSize similar to how was described above.
Ok, I’ll give this a try thank you!
If only it was that easy. Unfortunately, the font property is a string with the font name in it (i.e. “italic bold 20px arial,serif”). Do a search on google for “js font size property” and you will find the right property. Just keep in mind, it too will be a string like “10px”.
You said:
Can you please clarify this?
If I want to set the font size of an element to 30px, I could write something like:
var myElement = document.getElementById('theText'); // assumes an element with id="theText" exists
myElement.style.fontSize = '30px';
Using a variable like I said, would be:
var myElement = document.getElementById('theText'); // assumes an element with id="theText" exists
var textSize = 30;
myElement.style.fontSize = textSize + 'px';
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);
So what do I still need to do here?
This line above will assign document.getElementById (“result”).style.fontSize ‘20px10px’. You are just concatenating two strings with the + operator.
Try making currTextSize just a number (20). You can build the string of ‘20px’ which would replace what you currently have on the right side of the = in the line above.
let currTextSize = "20px";
currTextSize + "10px"; // "20px10px"
This is what the value of your font-size property will look like with your current code.