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

Grizzly096 0
Viewed 27

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!

font-size javascript html
1 Answers

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>

userltqd0
Related