Resizing Letters Using Javascript

Question

I want to be able to get the font size to change when you click on the different sized letters that are on the right. How do I go about commanding the site to do that using javascript? Here is the code I have so far:

  <!DOCTYPE html>
<html>
<head>
<body>

<div> 
 <font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font>
 <font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font>
 <font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font>

</div>

<div id="callout" class="medium">
    <ul id="controls">
        <li id="small">A</li>
        <li id="medium">A</li>
        <li id="large">A</li>
    </ul>
    <div id="mymain">
         <h1>Header</h1>

         <h2>Subheader</h2>

        <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
    </div>
</div>
<p style="margin-top: 100px; text-align: center; font-size: 75%;"><a href="../resize.zip">Download the files (resize.zip)</a>

</p>

<script src="resize.js"></script> 

</body>
</head>
</html>

Javascript:

function changemysize(myvalue) {
    var div = document.getElementById("mymain");
    div.style.fontSize = myvalue + "px";
}

"How do I go about..." is usually not a good question. We expect that you try first, then come back with your code, a live demo and people might help. — elclanrs, Oct 31 '13 at 21:17
@elclanrs well maybe there's some good stuff in "resize.js" :) — Pointy, Oct 31 '13 at 21:23
What's `resize.js`? What do you need help with? Which part are you stuck on? — gen_Eric, Oct 31 '13 at 21:25
resize.js is just a file with instructions on what I need to do. On the page, there is a small "A", medium "A", and a large "A". I need the font size to change to small, medium, and large when you click on the "A". — user2916725, Oct 31 '13 at 21:26
@user2916725: Where are you stuck? We're not going to do this for you. What *exactly* do you need help with? — gen_Eric, Oct 31 '13 at 21:28
I've updates my original question to show what I've tried and I don't think it's close to working. — user2916725, Oct 31 '13 at 21:39
Do I put that in the
? What would be an example of the code? — user2916725, Oct 31 '13 at 21:43
@user2916725: You need to have your `changemysize` function select an element that exists in your page. You can wrap the elements you want resized in a `
` or you can change your `document.getElementById("mymain")` to select an id that exists (or use other `document.getElementByXXX` functions). — gen_Eric, Oct 31 '13 at 21:45
Can you give me a more clearer example of what the code would look like? — user2916725, Oct 31 '13 at 21:49
I just don't know what I need to write to get the function to select the right element. — user2916725, Oct 31 '13 at 21:52
@user2916725: What element(s) do you want to resize? My 1st suggestion was just to add another `
` to the page. Here's an example: http://jsfiddle.net/wfT39/ — gen_Eric, Oct 31 '13 at 21:53
I updated my original post to something like what you said, and it still doesn't work. What am I missing? — user2916725, Oct 31 '13 at 21:57
@user2916725: You didn't change anything. I added a `
` to the HTML. Check the example again: http://jsfiddle.net/wfT39/ — gen_Eric, Oct 31 '13 at 22:01
Sorry! I just updated it again. I then put what you had as the javascript in the resize.js file. It still isn't changing the font size. — user2916725, Oct 31 '13 at 22:06
@user2916725: Do you see any errors in your JavaScript console? — gen_Eric, Oct 31 '13 at 22:07
@user2916725: If it's in the HTML file, yes. If it's in its own `.js` file, no. — gen_Eric, Oct 31 '13 at 22:13
I have updated everything and it still isn't working properly. Why? — user2916725, Oct 31 '13 at 22:18
@user2916725: How are you adding that JavaScript to the page? — gen_Eric, Oct 31 '13 at 22:24
@user2916725: Not in the code currently shown in the question. — gen_Eric, Oct 31 '13 at 22:25
I updated it again and now it is linked, right? It still isn't working. — user2916725, Oct 31 '13 at 22:28
@user2916725: What browser are you using? They all have built-in tools to help developers. The console will show any error/warning messages from JavaScript. — gen_Eric, Oct 31 '13 at 22:33
It says there is errors with the
with the different font sizes and the link to the resize.js file. — user2916725, Oct 31 '13 at 22:36

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Steps:

Define a class in your css file for enlarged fontsize.
Call a function on your li's onclick
Let the function add/remove respective class for ur html body document.body.classList.add('nameOfTheClassWithFontSize');

Ref: change text-font size of whole page content

edited May 23 '17 at 10:25

Community

1
1

answered Oct 31 '13 at 21:26

ajc

1,685
14
34

Please try to follow the steps, use jsfiddle.net. If that dint help, please check the reference I shared. I'm sure you'll find your answer. – ajc Oct 31 '13 at 21:39
1

you are getting the element by document.getElementById("mymain"); But there isn't any html element with that id. – ajc Oct 31 '13 at 21:44

score 0 · Answer 2 · answered Oct 31 '13 at 21:29

0

For your HTML using jQuery: $('body').css('font-size', '12px');

You can pass size you want for increasing/decreasing and so on.

answered Oct 31 '13 at 21:29

comprex

743
3
9
20

Resizing Letters Using Javascript

2 Answers2