изменить размер шрифта с помощью javascript

Question

Привет, у меня есть этот код, чтобы изменить размер шрифта абзаца с помощью 3 кнопок, я хотел бы знать, какой метод я могу использовать, чтобы не повторять одни и те же строки и сделать этот код более компактным. много :)

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' 
} 

я думал в цикле, но я не могу понять, как это сделать:/

Answer 1

Try что-то вроде этого

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 Другой Approch (не тестировался, но должен работать)

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); 
    } 
} 

Вы также можете удалить события окно загрузки обработчика и функции INICIO и попробовать себя функцию выполнения, как этот

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

Answer 2

может быть, это изменение может помочь вам:

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'; 
    }