How can I increase or decrease font size of page by clicking on a button-CodePudding

I am trying to increase the fonts size of my page using javascript. I have this code but it is not working as expected. Can someone please check what I am not doing correctly?

here is the HTML and javascript code:

<body>
<center>
    <button type="button"
        onclick="changeSizeByBtn(15)" name="btn1">
        -A
    </button>
    
    <button type="button"
        onclick="changeSizeByBtn(20)" name="btn2">
        A
    </button>

    <button type="button" onclick="changeSizeByBtn(25)"
        name="btn3">
        A 
    </button>
    <br /><br />

    <div style="padding: 20px; margin: 50px;
        font-size: 20px; border: 5px solid red;"
        id="container" >
        
        <p>
            I need to increase this texts here by clicking on A  button and decrease them by clicking -A button above.<br> 
            Or increase and decrease them by draging the range below to left or right<br> What is wrong in my code?
        </p>
    </div>

    <input type="range" min="10" max="100" id="slider"
        onchange="changeSizeBySlider()" value="40" />
</center>

<script>
    var cont = document.getElementById("container");

    function changeSizeByBtn(size) {

        // Set value of the parameter as fontSize
        cont.style.fontSize = size;
    }

    function changeSizeBySlider() {
        var slider = document.getElementById("slider");

        // Set slider value as fontSize
        cont.style.fontSize = slider.value;
    }
</script>

CodePudding user response：

Make sure to add the unit after setting fontSize (pixels, chars, em, rem etc.) Feel free to run the snippet below.

var cont = document.getElementById("container");

function changeSizeByBtn(size) {
  // Set value of the parameter as fontSize
  cont.style.fontSize = size   "px"; // <- HERE
}

function changeSizeBySlider() {
  var slider = document.getElementById("slider");

  // Set slider value as fontSize
  cont.style.fontSize = slider.value   "px"; // <- HERE
}

<body>
  <center>
    <button type="button" onclick="changeSizeByBtn(15)" name="btn1">
      -A
    </button>

    <button type="button" onclick="changeSizeByBtn(20)" name="btn2">
      A
    </button>

    <button type="button" onclick="changeSizeByBtn(25)" name="btn3">
      A 
    </button>
    <br /><br />

    <div
      style="
        padding: 20px;
        margin: 50px;
        font-size: 20px;
        border: 5px solid red;
      "
      id="container"
      
    >
      <p>
        I need to increase this texts here by clicking on A  button and decrease
        them by clicking -A button above.<br />
        Or increase and decrease them by draging the range below to left or
        right<br />
        What is wrong in my code?
      </p>
    </div>

    <input
      type="range"
      min="10"
      max="100"
      id="slider"
      onchange="changeSizeBySlider()"
      value="40"
    />
  </center>
</body>

CodePudding user response：

First of all I recommend you not to mix the code, in the html file only html. For this you can add <link rel="stylesheet" href="style.css"/> in the header to add the inject the css code and <script src="script.js"></script> at the end of the body to inject the javascript code (In quotes goes the path and name of the file)

Now, your only mistake is that to modify the font it is necessary to add the font unit type, be it px, rem, em, etc ...

I leave you here how your code would be with the html, css and javaScript separated. Also when it comes to buttons you can add a value to each button and use it later to change the font size.

Lastly, don't use <center> as it is deprecated. Instead use a div as a container and add text-align: center or any other kind of shape to center your content. Center is deprecated MDN Web Docs

let cont;

function loadEvents() {
    cont = document.getElementById("container");

    let slider = document.getElementById("slider");
    slider.addEventListener("change", () => {
        changeSize(slider.value);
    });

    
    let btns = document.getElementsByClassName("btn");
    for (const btn of btns) {
        btn.addEventListener("click", () => {
            changeSize(btn.value);
        });
    }
}


function changeSize(size) {
    cont.style.fontSize = `${size}px`;
}



// Load the events after loading the DOM elements
addEventListener("DOMContentLoaded", loadEvents);

.primary-container {
  text-align: center;
}

.container {
    padding: 20px;
    margin: 50px;
    font-size: 20px;
    border: 5px solid red;
}

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="style.css" />
        <title>Hello, world!</title>
    </head>

    <body>
        <div >
            <button type="button"  value="15">-A</button>

            <button type="button"  value="20">A</button>

            <button type="button"  value="25">A </button>
            <br /><br />

            <div id="container" >
                <p>
                    I need to increase this texts here by clicking on A  button and decrease them by clicking -A button
                    above.<br />
                    Or increase and decrease them by draging the range below to left or right<br />
                    What is wrong in my code?
                </p>
            </div>

            <input type="range" min="10" max="100" id="slider" value="40" />
        </div>

        <script src="script.js"></script>
    </body>
</html>