html - javascript onclick function to enlarge text -

i'm not sure why, can't seem work.

here function enlarge font.

<script type="text/javascript">     function growtext() {         var text = document.getelementbyid("t_left_text");         text.font-size=22px;         </script> 

and here call it

<div id="t_left" onclick="growtext()">     <br />     <p id="t_left_text">mountains beautiful land structures <br /> result of plate tectonics.</p>     <br /> </div> 

try:

text.style.fontsize = "22px"; 

demo: http://jsfiddle.net/c2mwn/

when want change element's css, need use style property. determine name of specific style property, css name converted camel case - "font-size" becomes "fontsize", identifier valid in javascript.

while setting style properties works, , although simple example, might easier deal adding , removing class. useful when setting multiple css properties. class defined as:

.enlarged-font {     font-size: 22px; } 

and manipulate text.classname property (and/or classlist property).

depending on browser you're using, have provided better description (as obvious of us) of problem using javascript console in browser. in firefox, use firebug. in internet explorer , chrome, use developer tools. if installed/enabled, these can brought pressing f12 on keyboard.

also, don't forget close function }.

reference:

• style property: https://developer.mozilla.org/en-us/docs/dom/element.style
• classlist property: https://developer.mozilla.org/en-us/docs/dom/element.classlist