Var is null but it is defined.

guyfromfl · September 21, 2009

I am trying to create a dynamic table for an invoice. Firebug keeps returning elqty is null.

It was working even when you add a new item, but stopped for some reason, and started giving me that error.

the variable is in function updateTotal at the bottom of invoice.js

Here are both files, you should be able to copy and paste both and get it to work.

invoice.js

function addRow(tableID) {

		var table = document.getElementById(tableID);

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var cellSelect = row.insertCell(0);
		var element1 = document.createElement("input");
		element1.type = "checkbox";
		cellSelect.appendChild(element1);

		var cellItem = row.insertCell(1);
		cellItem.innerHTML = rowCount; // + 1;

		var cellDescription = row.insertCell(2);
		var element2 = document.createElement("input");
		element2.type = "text";
		element2.name = "description_" + rowCount;
		element2.size = "30";
		cellDescription.appendChild(element2);

		var cellQty = row.insertCell(3);
		var element3 = document.createElement("input");
		element3.type = "text";
		element3.name = "qty_" + rowCount;
		element3.id = "qty_" + rowCount;
		element3.size = "3";
		element3.setAttribute("onchange", "updateTotal('dataTable');");
		cellQty.appendChild(element3);

		var cellPrice = row.insertCell(4);
		var element4 = document.createElement("input");
		element4.type = "text";
		element4.name = "price_" + rowCount;
		element4.id = "price_" + rowCount;
		element4.size = "8";
		element4.setAttribute("onchange", "updateTotal('dataTable');");
		cellPrice.appendChild(element4);

		var cellTotal = row.insertCell(5);
		var element5 = document.createElement("input");
		element5.type = "text";
		element5.name = "total_" + rowCount;
		element5.id = "total_" + rowCount;
		element5.size = "8";
		element5.disabled = "disabled";
		cellTotal.appendChild(element5);

	}

	function deleteRow(tableID) {
		try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;

		for(var i=0; i<rowCount; i++) {
			var row = table.rows[i];
			var chkbox = row.cells[0].childNodes[0];
			if(null != chkbox && true == chkbox.checked) {
				table.deleteRow(i);
				rowCount--;
				i--;
			}

		}
		}catch(e) {
			alert(e);
		}
	}

	function updateTotal(tableId) {
		var table = document.getElementById(tableId);
		var rowCount = table.rows.length;
		var elSubttl = document.getElementById("subtotal");
		var elTotal = document.getElementById("total");

		var total=0;
		var subttl=0;

		for (var i=1; i<=rowCount; i++) {
			var thisElQty = "qty_" + i;
			var thisElPrice = "price_" + i;

			var elqty = document.getElementById(thisElQty);
			var elprice = document.getElementById(thisElPrice);

			var elttl = document.getElementById("total_" + i);

			var qty = elqty.value;
			var price = elprice.value;

			var priceWithQty = qty * price;

			subttl = priceWithQty;

			elttl.value = formatMoney(subttl);
			//total += subttl;

		}
		elSubttl.value = formatMoney(total);
		elTotal.value = formatMoney(total);

	}

	function formatMoney(money) {
		money = "$" + money.toFixed(2);

		return money;
	}

in.php

<html>
<head>
<TITLE> Invoice </TITLE>
<script language="javascript" type="text/javascript" src="includes/invoice.js"></script>
<link href="includes/css/bli.css" type="text/css" rel="stylesheet" />
</head>
<body>


<?php
if ($_GET['action'] == "add") {
foreach($_POST as $data) {
	echo $data . "<br />";
}
} else {
?>

<form action="in.php?action=add" method="post">
	<div width="50%">
	<table id="dataTable" width="50%" border="1" style="margin-left: auto; margin-right: auto">
		<tr><th colspan="4"> </th><th colspan="2"><input type="button" value="Add Item" onclick="addRow('dataTable')" />
<input type="button" value="Delete Items" onclick="deleteRow('dataTable')" /></td>
</th>
		<tr><th>Select</th><th>Item</th><th>Description</th><th>Qty</th><th>Price</th><th>Total</th></tr>
		<tr><td><input type="checkbox" name="chk"/></td>
			<td>1</td>
			<td><input type="text" name="description_1" size="30" /></td>
		    <td><input type="text" name="qty_1" size="3" id="qty_1" onchange="updateTotal('dataTable');" /></td>
			<td><input type="text" name="price_1" size="8" id="price_1" onchange="updateTotal('dataTable');" /></td>
			<td><input type="text" name="total_1" size="8" id="total_1" disabled="disabled" /></td>
		</tr>
	</table>
	<table width="50%" style="float: right; margin-left: auto; margin-right: auto">
			<tr><td>Sub-Total:</td><td><input type="text" disabled="disabled" id="subtotal" /></td></tr>
			<tr><td>Tax:</td><td><input type="text" disabled="disabled" id="tax" /></td></tr>
			<tr><td>Total:</td><td><input type="text" disabled="disabled" id="total" /></td></tr>
			<tr><td> </td><td><input type="submit" /></td></tr>
	</table>

	</div>
</form>

</body>
</html>
<?php } ?>

haku · September 21, 2009

Vagueness = lack of solution.

Sign In

Var is null but it is defined.

Recommended Posts

guyfromfl

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information