JS Problem In FireFox

christrinder

08-31-2007, 11:31 AM

Hi all,

Could anybody give me a clue as to what is wrong with this (simple) piece of javascript that prevents it working in FireFox and other non-IE browsers???

<script type="text/javascript">
function CheckInputLength()
{
var txtMaxLength = document.getElementById("txtMaxLength");

if (txtMaxLength != null)
{
var txtUserInput = document.getElementById("txtUserInput");
var lblCharRemain = document.getElementById("lblCharRemain");
var intMaxLength = eval(txtMaxLength.value);
var intCurLength = eval(txtUserInput.value.length);
var intRemain = intMaxLength - intCurLength;

lblCharRemain.innerText = intRemain.toString();
}
}
</script>

<body onkeyup="CheckInputLength();">

<input name="txtMaxLength" type="text" value="600" id="txtMaxLength" />

<textarea name="txtUserInput" id="txtUserInput">test</textarea>

Characters Remaining: <span id="lblCharRemain">?</span>

</body>

abduraooft

08-31-2007, 11:43 AM

Change lblCharRemain.innerText to lblCharRemain.innerHTML

coothead

08-31-2007, 11:59 AM

Hi there christrinder,

I would suggest that you change innerText to firstChild.nodeValue, remove the evals and place the onkeyup within the script.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
window.onload=function() {
document.body.onkeyup=function(){
CheckInputLength();
}
}
function CheckInputLength(){
txtMaxLength = document.getElementById("txtMaxLength");

if(txtMaxLength!= null){
txtUserInput=document.getElementById("txtUserInput");
lblCharRemain=document.getElementById("lblCharRemain");
intMaxLength=txtMaxLength.value;
intCurLength=txtUserInput.value.length;
intRemain=intMaxLength-intCurLength;

lblCharRemain.firstChild.nodeValue= intRemain.toString();
}
}
</script>

</head>
<body>

<div>

<input id="txtMaxLength" name="txtMaxLength" type="text" value="600" />

<textarea id="txtUserInput" name="txtUserInput" rows="5" cols="20">test</textarea>

Characters Remaining: <span id="lblCharRemain">?</span>

</div>

</body>
</html>
coothead