How do I change Font size of the html page with an input tag

Question

HTML

<form title="Change the Size of the Text!">
<input type="number">
<input type="button" onclick="changeFontSize(myFontSize + 'px')" value="Give it in!">
</form>

JS

function changeFontSize(FontSize) {
    document.body.style.fontSize = FontSize;
}

Okay so basically I want to change the text size of the entire Web Page by giving an value to the input field and this number thats been send will be the new font size of the page.. Ive experiented with this and thats the best that i could come up with. Any help will be very appreciated!

Answer 1

In your onclick, you're passing changeFontSize(myFontSize + 'px') but myFontSize doesn't exist.

In this scenario, I'd make changeFontSize not take any parameters and instead get the value of the input inside of the chngeFontSize function.

function changeFontSize() {
  const fontSize = document.getElementById('fontSize').value;
  document.body.style.fontSize = `${fontSize}px`;
}

<form title="Change the Size of the Text!">
  <div>text</div>
  <input type="number" id="fontSize">
  <input type="button" onclick="changeFontSize()" value="Give it in!">
</form>