Get cells by className to equal innerHTML of cell id 'subtotal'

[Heinz Stapff]

Question Get cells by className to equal innerHTML of cell id 'subtotal'
I'm trying to grab all the cells created with insertrow function and the className 'rowtotal' and get their innerHTML to equal that of a cell with id 'subtotal'. This is a simplified html code of single cell inserted rows:

index.html

<tfoot> 
<tr id="footsubtotal"> 
<td id="subtotal">$ 75.00</td>  
//all cells of class "rowsubtotal" must have same innerHTML as this. 
</tr> 
</tfoot>  
<tbody> 
<tr class="itemrow">
<td class="rowsubtotal">$ 15.00</td>
</tr>  
<!--3rd inserted row at row index 0 innerHTML should be '$ 75.00'--> 
<tr class="itemrow">
<td class="rowsubtotal">$ 20.00</td>
</tr>  
<!--2nd inserted row at row index 0 innerHTML should be '$ 75.00'--> 
<tr class="itemrow">
<td class="rowsubtotal">$ 40.00</td>
</tr>  
<!--1st inserted row at row index 0 innerHTML should be '$ 75.00'--> 
<tr class="dummy">
<td class="message">Thank You</td>
</tr> 
</tbody>

These functions are not working and I'm not sure I can get javascript functions that will.

product.js

function checksubtotal(){ 
var subtotal=document.getElementById('subtotal').innerHTML; 
var rowsubtotals=document.getElementsByClassName('rowsubtotal'); 
for(var i=0; i< rowsubtotals.length; i++){ 
var rowsubtotal=rowsubtotals[i]; 
if(rowsubtotal.innerHTML!==subtotal){ //comparison '!==' ??? 
rowsubtotal.innerHTML=subtotal; } 
else{ rowsubtotal.innerHTML=subtotal; }}//throws syntax error?  

function deleterow(a) { // remove row 
var row=a.parentNode.parentNode; 
row.parentNode.removeChild(row); 
var sTotal=sumsubtotal(); 
//don't know what this is but seems to work??  
EvalSound4(); checksubtotal();
//doesn't work??

Not sure if this is the wrong approach, might have to use a
!match syntax. Any help greatly appreciated :'(

[Taywin]

Don't know what you mean by "not working"? There are tons of possibility...

Anyway, have you checked that "rowsubtotals" variable consists of HTML elements you are looking for? That may be the starting point for your debugging.

[Heinz Stapff]

Taywin yes I know they are there as I setup an addEvent onclick of a utility button that tells me the length of 'rowsubtotals'. Of cource they are not there to begin with and are only there after the rows are inserted. Clicking the button not only tells me how many cells with className 'rowsubtotal' it also tells me how may rows are inserted as there is only one cell with className 'rowsubtotal' per row.

addEvent(document.getElementById('button'),'click',function(){
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
alert(rowsubtotals.length);
},false);

[Heinz Stapff]

Ok. after opening a brace before the if statement and taking out the else statement thanks to pactor21 at webdeveloper.com, I got the first inserted row and last inserted row containing cells of className 'rowsubtotal' innerHTML to match the innerHTM of cell id 'subtotal' in the table but any rows in between row index 0 and row index -1 or last are unchanged.

The script

function checksubtotal(){ 
var subtotal=document.getElementById('subtotal').innerHTML; 
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
for(var i=0; i< rowsubtotals.length; i++){ //loop only gets first and last
var rowsubtotal=rowsubtotals[i];
} 
if(rowsubtotal.innerHTML!==subtotal){ // may need comparison '!match subtotal' ?
rowsubtotal.innerHTML=subtotal;
} 
}

function deleterow(a) {
// remove row
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal();
checksubtotal();//only changes first and last rows cells className 'rowsubtotal' ?
EvalSound4();
}

HTML RESULT

<tfoot>
<tr id="footsubtotal">
<td id="subtotal">$ 75.00</td> 
//all cells of class "rowsubtotal" must have same innerHTML as this.
</tr>
</tfoot>

<tbody>
<tr class="itemrow"><td class="rowsubtotal">$ 75.00</td></tr> 
<!--3rd inserted row at row index 0 innerHTML equals '$ 75.00' or innerHTML of 'subtotal'-->
<tr class="itemrow"><td class="rowsubtotal">$ 20.00</td></tr> 
<!--2nd inserted row at row index 0 innerHTML should be '$ 75.00' but doesn't ?-->
<tr class="itemrow"><td class="rowsubtotal">$ 75.00</td></tr> 
<!--1st inserted row at row index 0 innerHTML equals '$ 75.00' or innerHTML of 'subtotal'-->
<tr class="dumy"><td class="message">Thank You</td></tr>
</tbody>

I'm realy thinking a comparison by match of the innerHTML of 'subtotal' might get the for loop getting all the cells of className 'rowsubtotal' to equal cell id 'subtotal' innerTML. Will check it out.:'(

[Taywin]

Hmm... Let me see... Because you don't indent your script properly, it is more difficult to check each scope... Let see old script first.

function checksubtotal() {
  var subtotal=document.getElementById('subtotal').innerHTML; 
  var rowsubtotals=document.getElementsByClassName('rowsubtotal'); 
  for(var i=0; i< rowsubtotals.length; i++) { 
    var rowsubtotal=rowsubtotals[i]; 
    if(rowsubtotal.innerHTML!==subtotal){ //comparison '!==' ??? 
      rowsubtotal.innerHTML=subtotal;
    } 
    else {
      rowsubtotal.innerHTML=subtotal;
    }
  }//throws syntax error?  

//!!! missing closing curly bracket!

function deleterow(a) { // remove row 
  var row=a.parentNode.parentNode; 
  row.parentNode.removeChild(row); 
  var sTotal=sumsubtotal(); 
  //don't know what this is but seems to work??  
  EvalSound4(); checksubtotal();
  //doesn't work??

// ??? Another missing a closing curly bracket here too???

Now let see new script...

function checksubtotal() { 
  var subtotal=document.getElementById('subtotal').innerHTML; 
  var rowsubtotals=document.getElementsByClassName('rowsubtotal');
  for(var i=0; i< rowsubtotals.length; i++) { //loop only gets first and last
    var rowsubtotal=rowsubtotals[i];
  } 
  // Huh??? End loop already???

  if(rowsubtotal.innerHTML!==subtotal){ // may need comparison '!match subtotal' ?
    rowsubtotal.innerHTML=subtotal;
  } 
}  // this one close it properly!

function deleterow(a) {
// remove row
  var rowsubtotals=document.getElementsByClassName('rowsubtotal');
  var row=a.parentNode.parentNode;
  row.parentNode.removeChild(row);
  var sTotal=sumsubtotal();
  checksubtotal();//only changes first and last rows cells className 'rowsubtotal' ?
  EvalSound4();
}  // also close this one correctly too!!!

PS: Lesson learned. You need to do indentation properly. It is for readability and would help you out from debugging by lots.

[Heinz Stapff]

Taywin Thanks for the reply. pactor21 from webdeveloper com had already pointed that out. My last post showed the result of the amended function syntax, not staggerd for readability puroses too! Shows that the function only changes the first and last rows inserted and none of the rows in between/middle. So I decided I need to get the for loop to test the innerHTML of each element of className 'rowsubtotal' against the innerHTML of cell id 'subtotal'. if the test proves true then carry on till it doesn't and change the innerHTML of all those that doen't?

SOMETHING LIKE THIS

function checksubtotal(){ 
var subtotal=document.getElementById('subtotal').innerHTML; 
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
for(var i=0; i< rowsubtotals.length; i++){ 
                                          var rowsubtotal=rowsubtotals[i].innerHTML;
                                          var found=test.subtotal;//returns test undefined
                                         } 
           if(rowsubtotal.found){
              return false;                                
                                }
else{ 
     rowsubtotal=subtotal;
     return true; //might stop at the first one found?
    } 
                        }

I'm generally pissed of at having to crunch white space out when staggering functions.

[Taywin]

You still struggle with loop concept.

function checksubtotal() { 
  var subtotal=document.getElementById('subtotal').innerHTML; 
  var rowsubtotals=document.getElementsByClassName('rowsubtotal');
  for(var i=0; i< rowsubtotals.length; i++) { 
    var rowsubtotal=rowsubtotals[i].innerHTML;
    var found=test.subtotal;//returns test undefined
  } 
  // End loop already?
  // You declare "local" variables (using VAR) and it has no use outside the loop scope.

  // what is .found for "rowsubtotal"??
  if(rowsubtotal.found) {
    return false;
  }
  else{ 
    rowsubtotal=subtotal;
    return true; //might stop at the first one found?
  } 
}

I guess you have already had help from webdeveloper.com. Anyway, look back at your original...

function checksubtotal() {
  var subtotal=document.getElementById('subtotal').innerHTML; 
  var rowsubtotals=document.getElementsByClassName('rowsubtotal'); 
  for(var i=0; i< rowsubtotals.length; i++) { 
    if(rowsubtotals[i].innerHTML!==subtotal) { //comparison '!==' ??? 
      rowsubtotals[i].innerHTML=subtotal;
    } 
  }
}  // fixed

function deleterow(a) { // remove row 
  var row=a.parentNode.parentNode; 
  row.parentNode.removeChild(row); 
  var sTotal=sumsubtotal(); 
  //don't know what this is but seems to work??  
  EvalSound4(); checksubtotal();
}  // fixed

[Heinz Stapff]

Wow Taywin that got it. God, Allah and Budah bless you! So simple and it was the the third and final '}' closing brace that got all cells of className 'rowsubtotal' to equal the innerHTML of cell id 'subtotal'. This is the script that works.
SCRIPT THAT WORKS

function checksubtotal(){
var subtotal=document.getElementById('subtotal').innerHTML; 
var rowsubtotals=document.getElementsByClassName('rowsubtotal'); 
for(var i=0; i< rowsubtotals.length; i++){ 
if(rowsubtotals[i].innerHTML!==subtotal){
rowsubtotals[i].innerHTML=subtotal;
}}}

function deleterow(a) {
// remove row
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal();
checksubtotal(); //Finaly works!!!
EvalSound4();
}

HTML RESULT:)

<tfoot>
<tr>
<td id="subtotal">$ 75.00</td>
</tr>
<tr>
<td id="message">Muchos Mas Gracias!</td>
</td>
</tr>
</tfoot>

<tbody>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr id="dummy">
<td id="client Message">Thank You very Much <b>Taywin</b></td>
</tr>
</tbody>

Thanks again Taywin from DaniWeb.com

[Taywin]

Please mark it as solved.

[Heinz Stapff]

Hey Taywin how do you mark a post as resolved?:icon_evil: That is a handy post tool that most sites have omited today.

[Taywin]

Sorry, nope :( I never created a new post on this forum, so I've never done it. >_<