stop Javascript from outputting NaN

[nissa123]

Hello,

I am new to Javascript and cannot find anything to help me with this issue. I have a table (4 rows by 7 columns initially) where the user needs to input numbers in col 1 and col 3. The total of these two columns is stored in col 5. My problem is, negative numbers are accepted values but when the negative sign is entered, "NaN" displays in col 5 until the user enters a number. How do I stop this from being seen by the user? I tried many things but none have worked. If you need more info, please let me know.

Thanks, Nissa

function ss_keyhandler(evt) {
	
	//for IE
	if (evt.srcElement) {
		
		var code = evt.keyCode;
		
		if (code == 13)
			evt.srcElement.blur();
		if (((code >=48) && (code <=57))) return;
		if (code == 45){
		//what do I write here?
			return;
		}	
		evt.returnValue = false;
	}
	
	if(evt.target){
		var code = evt.which;
		
		if (code == 13)
			evt.target.blur();
		if (((code >=48) && (code <=57))) return;
		if (code == 45){
//same prob - what do I write here?
			return;
		}
		return false;	
	}	
}

 

[friendlyposter]

NaN just means "Not a Number" - and is a common result of trying to place a non-number into a computation function.

For example:

var a = "123" ;
var b = "ABC" ;

var c = Math.floor(a+b) ; // put "NaN" in c

The lines of code that you expose has to do with keypresses, not math. So I cant help your code.

But as a newbie to javascript ... I have a caution for you:

In Javascript ... arithmentic is not a simple thing - you have to "convert" a numeric string into a real number to get it to work.



Try this for size:

<script language="javascript">


var a = "123" ;
var b = "-1" ;
var c = "xyz" ;

alert (Math.floor(a+c)) ; // generate NaN

alert(a+c) ; // generate "123xyz"

alert(a+b) ; // generate "123-1"


alert (Math.floor(a+b)) ; // generate NaN

alert (Math.floor(1*a+1*b)) ; // generate 122 // convert strings to numbers


</script>

NOTE: Multiplying by 1 ensures that a numeric string is not treated as a string.

The plus ADD operator (+) in javascript doubles as a concatenation operator (+) for strings.

Unless you make it clear that you mean aritmentic (ADD) by converting EACH operand to a true number, the PLUS (+) acts like a string "joiner" and merely concatenates.

This may be a source of some of these issues.

 

[nissa123]

Thanks for the quick reply. So if I understand correctly, I should keep my keyhandler the way it is and simply return when "-" is pressed, and I should modify my code where the totals are calculated.

For more info, here is more of the code. addactivity() is called from onclick in a php file and this calls both ss_keyhandler() from the above post and calcactivity() below. Should I put an if statement above where I marked //HERE in the code and then use Math.floor? Or is it better to just use Math.floor without the if since my keyhandler will prevent invalid input anyways?

Thanks again, Nissa

function addactivity(tableid){
	var activity = document.getElementById(tableid);
	var row = activity.insertRow(activity.rows.length-1);
	var cell = row.insertCell(-1);
	cell.innerHTML = '<textarea class="field100" rows="2" onkeypress="resizeTextArea(this,60); changeTextArea(this); setChanged();"></textarea>';
	cell = row.insertCell(-1);
	cell.innerHTML = '<input type="text" class="field100" style="text-align:right" onkeypress="ss_keyhandler(event)" onkeyup="calcactivity(this)" size="5" maxlength="5">';
	cell.width = 75;
	cell = row.insertCell(-1); 
	cell.innerHTML = '<input type="text" class="field100">';
	cell = row.insertCell(-1);
	cell.innerHTML = '<input type="text" class="field100" style="text-align:right" onkeypress="ss_keyhandler(event)" onkeyup="calcactivity(this)" size="5" maxlength="5">';
	cell.width = 75;
	cell = row.insertCell(-1);
	cell.innerHTML = '<input type="text" class="field100">';
	cell = row.insertCell(-1);
	cell.innerHTML = '<input type="text" style="text-align:right" class="field100" disabled>';
	cell = row.insertCell(-1);
	cell.innerHTML = '<button type="button" class="field100" onclick="deleteactivity(this)"><img border="0" src="images/Delete16.gif" width="16" height="16"></button>';
	
}

function calcactivity(obj){
	//get table id
	var table = getTableID(obj);
	
	var activity = document.getElementById(table.id);
	
	var rows = activity.rows;
	var internal = 0;
	var external = 0;
	var inttotal = 0;
	var exttotal = 0;
	var row; 
	
	//calculate totals
	for (var i = 2; i < rows.length-1; i++){
		row = rows[i];
//HERE
		internal = row.cells[1].childNodes[0].value - 0;
		external = row.cells[3].childNodes[0].value - 0;
		row.cells[5].childNodes[0].value = internal + external;
		inttotal += internal;
		exttotal += external;
	}
	
	//update totals
	rows = activity.rows;
	row = rows[rows.length-1];
	row.cells[1].childNodes[0].value = inttotal;
	row.cells[2].childNodes[0].value = exttotal;
	row.cells[3].childNodes[0].value = inttotal + exttotal;
		
}

 

[trollacious]

I'd set this functionality up to happen onblur rather than with every keypress. That way the calculation takes place AFTER the entire number is filled in, and all you have to do is check using isNaN() in the function.

Lee

 

[nissa123]

Hello Lee,

The onblur works great to stop NaN from being seen. I've changed the code to:

cell.innerHTML = '<input type="text" class="field100" style="text-align:right" onblur="ss_keyhandler(event)" onclick="calcactivity(this)" size="5" maxlength="5">';

The only problem is that the user must click on the same cell for the totals to be updated. I tried onfocus but this makes them click another cell first then the cell with input. I can't find any other handlers where onblur is guaranteed to occur first. Is there a handler out there that would occur after onblur and allow the user to either press enter or click anywhere (one that will work with IE, Netscape and Firefox)?

Thanks for helping with my questions.

Nissa

 

[nissa123]

Turns out I misread the details for onchange - this one works.

Nissa