0

estoy tratando de desarrollar un pequeño ejercicio de JQuery básico de un libro, se supone que al arrastrar una barra debajo del texto en la pagina, se supone que el tamaño de la fuente se incrementa, pero por alguna razón no pasa nada.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/JQuery2.js"></script>

</head>
<body>

   <div id="theText">Hello!</div>
   <form id="controller">
       <label for="sizer"></label><input type="range" id="sizer" max="100" min="10" >
   </form>

</body>
</html>

JAVASCRIPT*******************************

$(document).ready(function() {

    $('#sizer').change(function() {
        $('#theText').css('font-size',$('#sizer').val());
    });
});

1 respuesta 1

2

pues vas bien. Solo falta decirle al font size que son pixeles los que les estas pasando. Lo unico es concatenarle los px para eso lo haces con + + 'px'

$(document).ready(function() {

    $('#sizer').change(function() {
        $('#theText').css('font-size',$('#sizer').val() + 'px');
    });
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/JQuery2.js"></script>

</head>
<body>

   <div id="theText">Hello!</div>
   <form id="controller">
       <label for="sizer"></label><input type="range" id="sizer" max="100" min="10" >
   </form>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.