Change font size with JavaScript

Question

I have this code to change the font size of a paragraph with 3 buttons. I would like to know which method can I use to not repeat the same lines and make this code more compact.

window.addEventListener('load', inicio, false);

function inicio(){
var boton1 = document.getElementById('boton1');
var boton2 = document.getElementById('boton2');
var boton3 = document.getElementById('boton3');

boton1.addEventListener('click', fuente10, false);
boton2.addEventListener('click', fuente13, false);
boton3.addEventListener('click', fuente20, false);
} 

function fuente10(){
var parrafo = document.getElementById('parrafo');
parrafo.style.fontSize='10px'
}

function fuente13(){
var parrafo = document.getElementById('parrafo');
parrafo.style.fontSize='13px'
}

function fuente20(){
var parrafo = document.getElementById('parrafo');
parrafo.style.fontSize='20px'
}

I was thinking in a for loop but I can't figure it out how to do it :/

Why don't you use jQuery? It's way too easier to achieve this using jQuery! — Rutwick Gangurde
– Rutwick Gangurde, Commented Mar 26, 2013 at 5:26
@RutwickGangurde - jQuery is not needed to do something this basic. — Jared Farrish
– Jared Farrish, Commented Mar 26, 2013 at 5:28
im just triying to fully understand javascript to get better at programing, just learning :) — Jhonnatan Gonzalez Rodriguez
– Jhonnatan Gonzalez Rodriguez, Commented Mar 26, 2013 at 5:29
@JhonnatanGonzalezRodriguez thats the correct approach. You should know the fundamentals before playing with something build on top of it. — kiranvj
– kiranvj, Commented Mar 26, 2013 at 6:00

kiranvj · Accepted Answer · 2013-03-26 05:55:59Z

3

Try something like this

window.addEventListener('load', inicio, false);

function inicio(){
var boton1 = document.getElementById('boton1');
var boton2 = document.getElementById('boton2');
var boton3 = document.getElementById('boton3');

boton1.addEventListener('click', function() { setFont("10px");}, false);
boton2.addEventListener('click', function() { setFont("13px");}, false);
boton3.addEventListener('click', function() { setFont("20px");}, false);
} 

function setFont(value){
   var parrafo = document.getElementById('parrafo');
   parrafo.style.fontSize= value;
}

Update A different approch (not tested, but should work)

    window.addEventListener('load', inicio, false);
function inicio() {
    var fontDetails = {"boton1" : "10px" , "boton2" : "13px" , "boton3" : "20px"};
    var parrafo = document.getElementById('parrafo');
    var domElement  = "";
    var element  = "";

    for (element in fontDetails)
    {
        domElement = document.getElementById(element);
        domElement.addEventListener('click', function() { parrafo.style.fontSize= fontDetails[element]; }, false);
    }
}

You can also remove the window load event handler and function inicio and try self executing function like this

(function() { //your code here } )();

edited Mar 26, 2013 at 5:55

answered Mar 26, 2013 at 5:31

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jhonnatan Gonzalez Rodriguez Over a year ago

This works really good, its is not bad to make anonym functions to call the setFont function?

kiranvj Over a year ago

No issues AFAIK, we can call like that.

kiranvj Over a year ago

I have updated another approach, hope thats useful. The beauty of the new approach is that you can add new button and font size in the fontDetails objects without modifing anyother section.

Jared Farrish Over a year ago

Technically... For each anonymous function you're creating, there's excess memory required beyond the first created, which may cause memory leaks to occur. If there's multiple attachments for the same function, use a declared function instead.

Superlandero · Accepted Answer · 2013-03-26 06:13:21Z

1

Maybe this change can help you:

    window.addEventListener('load', inicio, false);

    var boton;

    function inicio()
    {
        modificar('boton1', 10);
        modificar('boton2', 13);
        modificar('boton3', 20);
    }

    function modificar(id, size)
    {
        boton = document.getElementById(id);
        boton.onclick=function(){fuente(size)};
        console.log(boton);
    }

    function fuente(size)
    {
        var parrafo = document.getElementById('parrafo');
        parrafo.style.fontSize=size+'px';
    }

edited Mar 26, 2013 at 6:13

answered Mar 26, 2013 at 5:30

Superlandero

6926 silver badges11 bronze badges

1 Comment

Jhonnatan Gonzalez Rodriguez Over a year ago

This ddnt worked for me it seems like when the window load it aitomatically set fon size 20 to ell the paragraphs, and buttons doesnt work :/

Collectives™ on Stack Overflow

Change font size with JavaScript

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related