HTML clickable image has to resize font - html

Question

I am building a website and I am trying something I cant figure out how it has to work.
In my menu I have 2 images.
<li id="fontup"><img width="40" height="40" src="images/fontup.png"/></li>
<li id="fontdown"><img width="40" height="40" src="images/fontdownpng.png"/></li>
Those 2 images represent a button in my menu that if you click it, the font size on the website has to increment or decrement by 1. I know HTML support the option "smaller" and "bigger".
When I click the one image -> a JavaScript or jQuery has to run to resize the font.
How exactly do I do this? (I am a very beginner in HTML and dreamweaver)
At the moment I have this :
<script type="text/javascript">
window.onload = function() {
document.getElementById("fontup").onclick = function() {
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("font").style.fontSize = larger;
};
};
</script>
As you can see I have this from a tutorial on the website, but I dont know what I need to customize more to have this working?
Also I have set a p-element with an id="font" to test this out but obviously this doesnt work.
** update :
Code I have now is :
On my index.html =
The scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/FontsSize.js"></script>
My 2 buttons
<li> <button id="fontup"><img width="40" height="40" src="images/fontup.png"/> </button></li>
<li> <button id="fontdown"><img width="40" height="40" src="images/fontdownpng.png"/> </button></li>
For testing I also have this:
<div id="test">lorem ipsum etc</div>
In a seperate .js file I have the following code:
var fs = 23;
$(document).ready(function() {
$('#test').css('font-size', fs);
});
$("#fontup").click(function() {
fs++
$("#test").css('font-size', fs);
});
$("#fontdown").click(function() {
fs--
$("#test").css('font-size', fs);
});
How come this still doesnt work?
If I update var fs the size does change... but if I click the button.. it doesnt.

Answer 1

If you can use jquery (as mentioned in your question), this will do what you want. You start by setting a default size for page load, then reset the font size (up or down) each time a button is clicked. The code below applies the re-sizing to a div, but you could apply it to body if you want to change the size of the font on everything (except elements with a more specific font size declaration)
var fs = 23;
$(document).ready(function() {
$('#content').css('font-size', fs);
$('#fontUp').click(function() {
fs++
$('#content').css('font-size', fs);
});
$('#fontDown').click(function() {
fs--
$('#content').css('font-size', fs);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="fontUp">UP</button>
<br>
<br>
<button id="fontDown">DOWN</button>
<br>
<br>
<div id="content">lorem ipsum etc</div>
EDIT: code updated for external JS file