Trying to create a button to change font size, Trying to create a button to change my font size using html and js Options

[markee]

Hi, I'm not sure if I'm posting this in the correct place. I am trying to create a button that allows a user to increase the font size and decrease the font size of a page. I'm am doing this with an HTML page and a javascript page, which I have never done before.

This is what I have at the beginning of the body section on my HTML page:

<section>
<p class=''>Change the font size below</p>
<button class="increase">+</button>
<button class="decrease">-</button>
</section>


I also have this at the end of my body section:

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



This is what my entire javascript page consists of:

$(document).ready(function () {

var changing_font_size = new Array(".change");

changing_font_size = changing_font_size.join(",");

$(".decrease").click(function () {

let originalFontSize = $(changing_font_size).css("font-size");

let changed_sized = parseFloat(originalFontSize, 10) - 0.8;

$(changing_font_size).css("font-size", changed_sized);

});

$(".increase").click(function () {

let originalFontSize = $(changing_font_size).css("font-size");

let changed_sized = parseFloat(originalFontSize, 10) + 0.8;

$(changing_font_size).css("font-size", changed_sized);

});

});



If anyone knows why nothing happens when I click these buttons please help

[Christian J]

I'm am doing this with an HTML page and a javascript page, which I have never done before.

Generally I would advice against a "change font-size" feature, it's much easier for both you and the user to just use the browser's own Zoom functionality.

But let's take look at it anyway! Have you written the jQuery yourself, or found it on the web? I don't do jQuery (just a little javascript), but some guesses follow:

CODE

  var changing_font_size = new Array(".change");

I think the array above is meant to contain the CLASS selectors that the font-size changing script is meant to affect. So at a minimum, there should be an HTML element with the CLASS "change", as well as a corresponding rule in the stylesheet.

CODE

    let originalFontSize = $(changing_font_size).css("font-size");

    let changed_sized = parseFloat(originalFontSize, 10) - 0.8;

The above seems to retrieve the "font-size" value from the CLASS in the stylesheet, and decrease it by some amount. But wouldn't the size unit get lost then? Also I don't know if parseFloat() can take two parameters ("originalFontSize, 10"), that's not mentioned in the references I checked.

[markee]

I removed '10' and the button magically started working

[pandy]

Generally I would advice against a "change font-size" feature, it's much easier for both you and the user to just use the browser's own Zoom functionality.

I don't agree. I would have said something similar 10 years ago, but since most browsers offer only the zoom function now and not text resizing, I think it at last is room for these buttons. No, I don't like page zoom.

[Darin McGrew]

I don't agree. I would have said something similar 10 years ago, but since most browsers offer only the zoom function now and not text resizing, I think it at last is room for these buttons. No, I don't like page zoom.

The browsers I've used have a minimum font size feature, but it's pretty well hidden if you don't know to look for it.

[pandy]

It's not the same. K-Meleon still has it, but I can no longer use the mouse wheel for that. Was so handy, CTRL+Scroll up/down.

[Christian J]

CTRL+Scroll up/down.

Firefox can still do it (View>Zoom>Text Only).

[pandy]

It's by keyboard only (or can it be remapped?) and it's page zoom, not text resizing.

[Christian J]

No, I meant you need to tick the Preference checkbox where I indicated. Then Firefox will zoom text only. The actual zooming can be done with Ctrl+mousewheel.

[pandy]

Ah, I hadn't noticed that. Thanks.