Member Avatar for sqlchopper

I have created the foloowing javascript and placed it in a file called common.js. it gets called on a onChange event. it works up till it gets to setting the value (i think). Being my first script i'm really at a loss why it errors out. I tried .value() = and .value( prevbal - demand..... TIA

function recalcnet(txt) {
			switch (txt) {
				case '0' :
				    recalcnet1();
				    break;}}
		function recalcnet1() {
				var prevbal = 0;
				var demand = 0;
				var whatif = 0;
				var sched = 0;
				prevbal = document.getElementById('BegInvTextbox').value;
				demand = document.getElementById('dm1TextBox').value;
				whatif = document.getElementById('ifm1TextBox').value;
				sched = document.getElementById('fmm1TextBox').value;
		        document.getElementById('nm1TextBox').value(prevbal - demand + whatif + sched)};
  • 3 Contributors
  • 3 Replies
  • 200 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Good catch by and helpful pointers from and . The failure wasn't getElementById itself but how values from form fields are treated and how JavaScript operators coerce types. The fix that was posted works; the following explains why the behavior is surprising and gives a safer pattern to avoid it in future.

Important detail: form element value is a string. The subtraction operator forces numeric conversion, but the addition operator will perform string concatenation if any operand is a string. That means an expression like prevbal - demand + whatif + sched can produce numeric subtraction at first, then turn into string concatenation if one of the later inputs remains a string. Explicitly coercing every input to a numeric type before doing arithmetic removes that ambiguity.

Example pattern (coercion + validation):

// coerce to numbers, fall back to 0 for non-numeric input
var p = Number(document.getElementById('BegInvTextbox').value) || 0;
var d = Number(document.getElementById('dm1TextBox').value) || 0;
var w = Number(document.getElementById('ifm1TextBox').value) || 0;
var s = Number(document.getElementById('fmm1TextBox').value) || 0;
var net = p - d + w + s;
// format if decimals are needed: net.toFixed(2)
document.getElementById('nm1TextBox').value = net;

Quick troubleshooting checklist:

  • Confirm element IDs match exactly (case matters).
  • Ensure the script runs after the DOM elements exist (place script at end of body or use DOMContentLoaded).
  • Use console.log(typeof val, val) or the debugger to inspect raw values before arithmetic.
  • For decimal inputs use parseFloat/Number (and format with toFixed); for strict integer parsing handle invalid input explicitly.
  • Remember .value is a property (not a function) when assigning the result.

These steps complement the earlier replies and prevent subtle concat/coercion bugs that are common in loosely typed JavaScript.

Recommended Answers

All 3 Replies

Member Avatar for Sailor_Jerry

Here is little example to get you started on debugging. I would place some alerts in there to see what's going on. I am not exactly sure what you’re trying to do with the line below.

You already know the value of prevbal… etc. If you want to set the element below to the value of those numbers try something like I did below. I am guessing those var are numbers. But in your code they will be treated as strings.

document.getElementById('nm1TextBox').value(prevbal - demand + whatif + sched)
<html><head>
<title></title>
<script>
function testFn()
{	
	var test1 = document.getElementById('Num1').value;
	if(test1 != "")
	{
		alert("Number 1: " + test1);
	}
	
	var test2 = document.getElementById('Num2').value;
	if(test2 != "")
	{
		alert("Number 2: " + test2);
	}
	
	if (test1 != "" && test2 != "")
	{
		var test3 = document.getElementById('Total');
		var total = test3.value = parseInt(test1) + parseInt(test2);
		alert("Total Num 1 + Num2: " + total);
	}
}
</script>
</head>

<body>
<label value"num1"> Number 1 </label> <input size="2" id="Num1" onChange="testFn()">
<label value"num2"> + Number 2 </label> <input size="2" id="Num2"  onChange="testFn()">

<label value="fullName"> Total: </label> <input size="4" id="Total" type=text>


</body>
</html>
Member Avatar for sqlchopper

thanks, the parseInt() worked. why does it treat it as a string.

Member Avatar for tgreer

Because JavaScript isn't strongly-typed... and the default type of textboxes and labels is a string.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.