0

how to Use JavaScript to create the functionality to increase / decrease the font size used on the website. The basic functionality should include two buttons - a button to make the font size smaller and a button to make the font size larger?

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
Uthpala Bandara
  • 1
  • 1
  • 1
    Does this answer your question? [How to change FontSize By JavaScript?](https://stackoverflow.com/questions/5586703/how-to-change-fontsize-by-javascript) – NiRUS May 06 '20 at 17:09

1 Answers1

0

You can listen to the click event of the two buttons, and change the font size of the document according to the id of the clicked button using document.body.style.fontSize as follows:

let buttons = document.getElementsByClassName("changeFontSize");
for(let i = 0; i < buttons.length; i++){
     buttons[i].addEventListener('click', function(e){
          if(e.target.id == "increase")
               document.body.style.fontSize = "20px";
          else if(e.target.id == "decrease")
               document.body.style.fontSize = "10px";
     })
}
<button id="increase" class="changeFontSize" type="button">Increase</button>
<button id="decrease" class="changeFontSize" type="button">Decrease</button>
<p>Hello</p>
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
  • Should increment by a %(20% I suggest) and not set a fixed number, because for AODA, you can click the button more than once. For my projects, we did 20% and 5 clicks gets you to 200% which is max – Huangism May 06 '20 at 17:19