CappY CappY - 8 months ago 10
HTML Question

JavaScript change fontsize not working everywhere

I have that code:

function change_npsize()
document.getElementById("np_drag").style.fontSize = document.getElementsByName("npsize").item(0).value;

<input type="text" name="npsize" size="2" maxlength="2" value="<?=$userinfo->npsize; ?>" onchange="change_npsize()" />

<div id="drag-container" style="position:relative;font-family:<?=$userinfo->font?>;">
<div id="np_drag" style="color:<?=$userinfo->npcolor?>; font-size:<?=$userinfo->npsize?>px;" class="draggable np_drag" style="position:absolute;left:80px;">
.::[ NowPlaying SIGnature ]::.

That code is working only in IE. I tried Firefox and Google Chrome.


The proper usage of getElementsByName() (at least in Firefox) is:


The following works (at least in Chrome):

document.getElementById("np_drag").style.fontSize = document.getElementsByName("npsize")[0].value + "px";

Update after comments:
The problem was using a numeric value without "px" suffix. Add + "px" to make the style correct, and the font size will work correctly in chrome and FF.