Changing javascript font doesn't work everywhere

Question

I have this 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>

This code only works in IE. I tried Firefox and Google Chrome.

Answer 1

Proper use getElementsByName()(at least in Firefox):

getElementsByName("npsize")[0];

The following works (at least in Chrome):

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

Pay attention to + "px"the end; you cannot just set it to a numerical value, you need to include the corresponding block in the value.

Answer 2

I tried this working code:

your HTML:

<input type="text" name="npsize" size="10" maxlength="2" value="small"/><br/><hr/>
<div id="np_drag">font</div>

your javascript:

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

See here here .

Also, please correct me if I am wrong.

EDIT: I changed the fiddle with your correctness with a different answer.

Answer 3

, .fontsize....

.size