CODEWITHSUNDEEP
javascripthtml
CappY
CappY

Reputation: 1580

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.

Upvotes: 4

Views: 4702

Answers (3)

Andrew Marshall
Andrew Marshall

Reputation: 96934

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";

Note the + "px" at the end; you can’t just set it to a numeric value, you need to include the appropriate unit in the value.

Upvotes: 6

user284291
user284291

Reputation:

I have 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 this working here.

Also, please correct me if I am wrong.

EDIT : I have changed the fiddle with your correctness at other answer.

Upvotes: 0

Wasim A.
Wasim A.

Reputation: 9890

I think this is not .fontsize ....

it might be .size

Upvotes: -2

Related Questions