Why I cannot change the variable to the innerHTML variable using JavaScript?

StackOverflow https://stackoverflow.com/questions/23658607

  •  22-07-2023
  •  | 
  •  

Question

I cannot finish my homework, because I find the problem. And I don't know why

Why I cannot change the variable to the innerHTML variable using JavaScript?

enter image description here
Upper is static html. after hr is the iframe, connect to another page.

<iframe src="insert5.php" name="myframe" id="myframe" width="650" height="400" scrolling="no" frameborder="0"> 
</iframe>

enter image description here
The problem is the total price of all products cannot normally display.
I want TOTAL normally display "495"
It is my expected result.
enter image description here

<script>
newzum =0;
for(var j=0;j <=document.getElementsByName("del").length+1;j++)  
{  
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
newzum += parseFloat(document.getElementById("total["+i+"]").innerHTML);
}
}
znum.innerHTML = newzum;
</script>
</tr> 
<tr class="tit3"> <td>Total </td> <td colspan=3> </td> <td colspan=2 align='right'> <b id="znum">0</b> </td> <td colspan=1> </td> </tr>
</table>

User for prompt the variable of newzum, it is normal display. 

<script>
function Check(){
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(newzum);
}
}
</script>
<input type="button" value="Check" onClick="Check();"/>

enter image description here
I click the check button to see the value of newzum, it is normal.

The problem is: znum.innerHTML = newzum;
The code is correct or wrong? And then, give me a good suggestion, thanks!

It is full code of the this page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>DDD</title>
<style>
#tlist tr:last-child td {
    background-color:#CCCCCC;
}
table{
    table-layout: fixed;
}
th, td {
    overflow: hidden;
}
#container
{ 
margin-left:auto; 
margin-right:auto; 
width:600px;
}
</style>
</head>
<body>

<?php
/*
$name = $_POST['selRow'];
$qty = $_POST['txtRow'];

foreach( $qty as $v ) {
print $v."<br>";
}

foreach( $name as $v ) {
print $v."<br>";
}
*/
?>
<script>
function delrecord(obj)  
{  
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);  
  var delbutton=document.getElementsByName("del");  
  var newzum=0;  
  for(var j=1;j <document.getElementsByName("del").length+1;j++)  
  {  
  newzum+=parseFloat(document.getElementById('total'+j).innerHTML);    
  }  
  znum.innerHTML =newzum; 
}  
function caltotal(e){
var fqty=document.getElementById('qty' +iteration);  
var fprice=document.getElementById('price' + iteration);  
var ftotal=document.getElementById('total'+ iteration);
var delbutton=document.getElementsByName("del");  
ftotal.innerHTML= fqty.innerHTML * fprice.innerHTML;

newzum =0;
for(var j=1;j <=document.getElementsByName("del").length;j++)  
{  
newzum += parseFloat(document.getElementById('total'+j).innerHTML);
}
znum.innerHTML = newzum;
}
</script>

<div class="container">
<table width="450" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">  
    <tr class="tit2">
    <td>QTY </td>
    <td>TILE </td>
    <td>HEIGHT </td>
    <td>WIDTH </td>
    <td>PRICE </td>
    <td>TOTAL </td>
    <td>Action </td>  
    </tr> 
    <tr class="tit3"> 
<?php
if(isset($_POST["submit"])){ 
$t=count($_POST['selRow']); 
$w=count($_POST['txtRow']);
for($i=0;$i<$t;$i++)
{
$qty[$i]= $_POST['txtRow'][$i];
$tile[$i]= $_POST['selRow'][$i];
$height = $_POST['height'];
$width = $_POST['width'];

echo "<tr class='tit3'><td>";
echo "".$qty[$i]."<br>";
echo "</td>";
echo "<td>";
echo "".$tile[$i]."<br>";
echo "</td>";
echo "<td>";
echo "".$height."<br>";
echo "</td>";
echo "<td>";
echo "".$width."<br>";
echo "</td>";
echo "<td>";
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    //foreach($_POST['selRow'] as $tile){

    $query = "SELECT `Price` FROM `actualpanelmaterialsize` WHERE `Material ID` IN (SELECT `Material_ID` FROM `material` WHERE `Tile` = '".$tile[$i]."') AND  `Width_Height ID` IN (SELECT `Width_Height ID` FROM `width_height` WHERE `Width` =".$_POST['width']." AND `Height` =".$_POST['height'].");";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    $price = $row[0];
    echo $price."<br>";
        }
    //}
echo "</td>";
echo "<td id='total[$i]'>";
echo $total[$i]=$price*$qty[$i];
echo "</td>";
echo "<td>";
echo "<input type='button' value='Delete' name='del' onclick='delrecord(this);'>";
echo "</td>";
echo "</tr>";
}
} 
?> 
<script>

newzum =0;
for(var j=0;j <=document.getElementsByName("del").length+1;j++)  
{  
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
newzum += parseFloat(document.getElementById("total["+i+"]").innerHTML);
}
}
znum.innerHTML = newzum;

</script>
</tr> 
<tr class="tit3"> <td>Total </td> <td colspan=3> </td> <td colspan=2 align='right'> <b id="znum">0</b> </td> <td colspan=1> </td> </tr>
</table>

<script>
/*
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(document.getElementById("total["+i+"]").innerHTML);
}
*/
function Check(){
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(newzum);
}
}
</script>
<input type="button" value="Check" onClick="Check();"/>
<input type="button" value="Calculate" onClick="Calculate();"/>
</div>
</body>
</html>
Was it helpful?

Solution

The id of your 'total' value is zum but you are assigning your total to znum. Change it to zum.innerHTML = newzum; and see if that gets you any closer.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top