javascript:获取单元格的值 - 修复表格单元格值未定义的问题

Question

我有一个 PHP 购物车，它将价格和数量回显到表格中。每个 Td 的 id 被命名为 p1、p2、p3...等。以及 q1、q2、q3 等。这样我就可以将它们定位为通过 JavaScript 显示购物车总成本。当我尝试获取 id 的值并将其放入警报中时，我得到“未定义”。我可以看到该值实际上是一个数字，那么为什么我没有定义呢？有没有办法通过 id 来访问 Td 的值，这样它就不是未定义的？我将不胜感激你的帮助。如果需要，将发布更多代码。

    var p1= document.getElementById("p1").value;
    var q1= document.getElementById("q1").value;
    var total= parseFloat(p1) * parseFloat(q1);  
    window.alert(p1); 

这是该页面的代码:

<div id="shopping-cart">
    <div class="txt-heading">
        <div class="label">Shopping Cart</div> 
        <a id="btnEmpty"><img src="empty-cart.png" id= "emptycart" 
alt="empty-cart" title="Empty Cart"  /></a>
    </div>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "secure_login";
$member_id = $_SESSION['login_user'];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
?>

 <?php 
 $query = "select * from tbl_cart WHERE member_id= '$member_id'";
 $result = mysqli_query($conn,$query);
 if (!$result) {
 printf("Error: %s\n", mysqli_error($conn));
 exit();
}



echo "<table id='anyclass'>";
echo "<tr>
         <th id='product1'>Product</th>
         <th id='price1'>Price</th>
         <th id='quantity1'>Quantity</th>
         <th id='remove1'>Remove</th>


    </tr>";

$i=1;
while($row = $result->fetch_assoc()) {  


echo "<tr class= 'trhide'>";

echo          "<td id='product'>".$row['product_id']."</td>";

echo          "<td id= 'p$i' >".$row['price']."</td>"; 
echo          "<td id= 'q$i' >". "<input style='border:none' type = 'text' 
class= 'change' id= $row[id] value= $row[quantity] name= $row[id] data-id= 
$row[id] >" . "</td>";

echo          "<td id= 'delete'><span class='delete' data-id= $row[id] ><img 
src=delete.svg></span></td>   
  </tr>";

  $i++;
}


echo  "<tr>
          <td>Total:</td>
          <td id= 'total'></td>
          <td></td>
          <td></td> 

  </tr>";
echo "</table>";


?>

Answer 1

td 没有 value；他们有innerText。更改这些:

var p1= document.getElementById("p1").value;
var q1= document.getElementById("q1").value;

致这些:

var p1= document.getElementById("p1").innerText;
var q1= document.getElementById("q1").innerText;