4 Replies - 5617 Views - Last Post: 03 January 2008 - 06:44 PM

#1 nicolechuah   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 30-December 07

Can't get the value from table cell

Posted 30 December 2007 - 09:03 PM

This is a simple meal order selection.When i click on the radio button,it will insert a new row to a table and insert the value. And there also got delete button to delete each row.
After finish order,i need to total up the prices.But,when i click on the calculate button, it shown error on page.How can i get the values and total up all the values?

Please take a look and help me ,thanks.

<html>
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(1);
var y=x.insertCell(0);
var a=x.insertCell(1);
var b=x.insertCell(2);
var d= '<input type="button" value="Delete" onclick="deleteRow(this)">';
var e= '<input type="text" id="answer" />';
var f= '<input type="text" name=num; id="answer1" />';
y.innerHTML=e;
a.innerHTML=f;
b.innerHTML=d;
}

function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

function check(browser,browser1)
{
document.getElementById("answer").value=browser;
document.getElementById("answer1").value=browser1;
}

function this_total( for_what )
{
var total = 0;
var i;

for (i = 1;i<10;i++){
var this_col = for_what.parentElement.parentElement.colIndex;
var num = this_col.getElementsById("answer1")[i].value;
total += num;
}

for_what.getElementById("ans").value = total; 
return;
}
</script>

</head>
<body>
<p>What's your favorite browser?</p>

<form>
<input type="radio" name="browser" onclick="insRow();check(this.value1,this.value2)" value1="Burger" value2="5.00">Burger<br />
<input type="radio" name="browser" onclick="insRow();check(this.value,this.value2)" value="Fried Rice" value2="4.00">Fried Rice<br />
<input type="radio" name="browser" onclick="insRow();check(this.value,this.value2)" value="Nescafe" value2="2.50">Nescafe<br />
<input type="radio" name="browser" onclick="insRow();check(this.value,this.value2)" value="Orange Juice" value2="3.60">Orange Juice<br />
<br />

</form>

<table id="myTable" border="1">
<tr>
<td>Title</td>
<td>Price</td>
<td>Cancel</td>
</tr>
<tr>
<td>Total: </td>
<td><input type="text" name="total" id="ans"></td>
<td><input type="button" onclick="this_total( this )" value="calculate"></td>
</tr>
</table>
<br />

</body>
</html>


Get this error: "undefined" is null or not an object. (line 39)

This post has been edited by nicolechuah: 30 December 2007 - 09:11 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Can't get the value from table cell

#2 girasquid   User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Can't get the value from table cell

Posted 31 December 2007 - 11:14 AM

There isn't really a getElementsByID function in Javascript - you need to use getElementById, which only retrieves one element - because you are supposed to have unique ID's for anything with an ID.
Was This Post Helpful? 0
  • +
  • -

#3 nicolechuah   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 30-December 07

Re: Can't get the value from table cell

Posted 31 December 2007 - 09:37 PM

em~~not so understand....

From this line,
var num = this_col.getElementsById("answer1")[i].value;

actually, at first, i write the code is :
var num = this_col.getElementsByTagName("td")[1].getElementsByTagName("input")[0].value;

but it also got an error same like the above.....
Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511   User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Can't get the value from table cell

Posted 01 January 2008 - 04:46 PM

Hello Nicole

I took a look at your code and I found that you have many mistakes:
First you don't need to declare i variable it's the for counter and it will declared automatically

Instead of getting the rows the way you did why don't you get the table and reach the rows inside it (that's will be easiest)

Put this code before the loop
Tbl=document.GetElementById("myTable")



For loop
Your for loops 10 times so what if you have just to rows?
Replace number 10 with the table's rows count and I'll show you how.
myTable.rows.length-1



for_what.
I don't really know what it is for??
It's always returns the last row since the calculate button is in it.
Beside you don't need to pass it to the function because we already get the table "myTable" using Tbl variable.
Anyway..
colInex?? Did you mean cellIndex ?
And you can't use it inside the TR, you can use it only inside TD
We really don't need this too

Var this_col
Now you can replace it with this and it'll work
var this_col = Tbl.rows(i)



Var num

Get the input box from the this_col using its tag name and its index which is 1(second input in each row)
It will looks like this
var num = this_col.getElementsByTagName("input")[1].value;


You can't get element by its id from its parent, but from the document
You can get the child objects from its parent using getElementsByTagName

Now, when it comes to calculating numbers, use Number method to convert it from string look like number to an real number you can use.
Otherwise you'll have a string variable with all the numbers you have sticks together
try this cood
total += Number(num)



Total
use documentinstead of for_what
document.getElementById("ans").value = total;



The last thing
After this changes made,you donít really need to pass (this) on calculate button
<input type="button" onclick="this_total()" value="calculate">



I hope this help you somehow

Good luck
Was This Post Helpful? 0
  • +
  • -

#5 nicolechuah   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 30-December 07

Re: Can't get the value from table cell

Posted 03 January 2008 - 06:44 PM

View Postahmad_511, on 1 Jan, 2008 - 04:46 PM, said:

Hello Nicole

.....

I hope this help you somehow

Good luck


:D Thank you for the help. I have learn something new today. :D

My problem already solved. Thanks you for all.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1