Javascript onclick button to change page font size or div font size

3
votes

I'll post the pages I've researched at the end. I need 3 buttons to change the font size of the div with paragraphs of text to 1.0em, 2.0em, and 3.0em when the buttons are clicked on. The initial body font size is 1.0em. I do have to use "em" on the font. I apologize if this isn't the correct format to post this in. I tried to follow the site help and rules.

This is the actual wording of the questions:

(1) Add three buttons below the horizontal rule. Label the buttons “Normal”, “Medium” and “Large”.

(2) Add an ‘click’ event handler to the “Normal” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 1em.

(3) Add an ‘click’ event handler to the “Medium” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 1.5em. Figure 14 shows a portion of the resulting web page.

(4) Add an ‘click’ event handler to the “Large” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 2.0em.

Here is the code I have: 

<div id="text" style="font-size: 1em">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
<hr>
<input type="button" value="Normal"
onclick="document.body.style.fontsize='1.0 em'">
<input type="button" value="Medium"
onclick="document.body.style.fontsize='1.5 em'">
<input type="button" value="Large"
onclick="document.body.style.fontsize='2.0 em'">
<!--  TEST BUTTON BEGIN -->
<br>
<input type="button" value="Test1"
onclick="document.getElementById("text").style.fontSize = "1.0 em">
<input type="button" value="Test15"
onclick="document.getElementById("text").style.fontSize = "1.5 em">
<input type="button" value="Test20"
onclick="document.getElementById("text").style.fontSize = "2.0 em">
<!-- TEST BUTTON END -->

I've created a test section of 3 buttons below the 3 actual buttons just to mess around with the javascript codes I found on stackoverflow.com. Any help or guidance would be greatly appreciated. Thank you.

I've checked these pages with similar issues:

change text-font size of whole page content

How to change FontSize By JavaScript?

click a button to change text font-size of <body> in javascript/css

Increase font size of whole web page on button click event using jquery

Increase the font size with a click of a button using only JavaScript

2
javascriptbuttonfontsonclicksize

2 Answers

2
votes

just omit the space between size and em

incorrect syntax:

document.getElementById("text").style.fontSize = "2.0 em">

correct syntax:

document.getElementById("text").style.fontSize = "2.0em">
0
votes

You need to put the number you want next to the word em. Also since you have your onclick method using " doublequotes, you should use single quotes ' in the JavaScript code like this:

onclick="document.getElementById('text').style.fontSize = '1.0em'"

Example:

<div id="text" style="font-size: 1em">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>
<hr>
<input type="button" value="Normal" onclick="document.getElementById('text').style.fontSize = '1.0em'">
<input type="button" value="Medium" onclick="document.getElementById('text').style.fontSize = '1.5em'">
<input type="button" value="Large" onclick="document.getElementById('text').style.fontSize = '2.0em'">
<!-- TEST BUTTON END -->