In this case your function will be more dynamic if you send the element you want to change as an argument to the function instead of using getElementById(). This way you can use the same functions for all your div elements.
<script type="text/javascript"> // All JavaScript must be encased in <script> tags.
function showLargeFontSize(element) // One function for increasing the size.
{
element.style.fontSize = "125%"; // 'element' is the div you're hovering over. Note the uppercase S in fontSize.
}
function showSmallFontSize(element) // And one function for resetting the size.
{
element.style.fontSize = "100%";
}
</script>
<div id="objectives" onmouseover="showLargeFontSize(this)" onmouseout="showSmallFontSize(this)">"this" refers to this div element.</div>
<div onmouseover="showLargeFontSize(this)" onmouseout="showSmallFontSize(this)">Another div.</div>
(Remember that uppercase and lowercase matters in JavaScript.)
You could also combine those functions if you add the font size as an argument.
<script type="text/javascript">
function setFontSize(element, size)
{
element.style.fontSize = size;
}
</script>
<div id="objectives" onmouseover="setFontSize(this, '125%')" onmouseout="setFontSize(this, '100%')">Hello.</div>
