CappY CappY - 6 months ago 9
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 ]::.
</div>
</div>


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

Answer

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

getElementsByName("npsize")[0];

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.