Question

所以我正在尝试使用HTML，CSS，Javascript和JQuery制作购物车。每当您单击橙色下的添加到购物车时，它将使几乎所有HTML元素消失，并仅显示购物车表。但是当您更改数量并单击更新购物车时，我在控制台中收到“未捕获的TypeError：无法读取null购物车的属性值”。我到处寻找找到解决方案，但找不到一个。我很感激帮助。

https://jsfiddle.net/John_Badew/er9z3kg1/10/

$(document).ready(function() {
  $("#bButton").click(function() {
    $(".sTable").append("<td>Banana</td");
    $(".sTable").append("<td><form><input id = 'bupdateQuantity' type='number' name='quantity' min='1'max='10'></form></td>");
    $(".sTable").append("<td>50 cents</td>");
    $(".sTable").append("<td id = 'bPrice'></td>");

  });
});

$(document).ready(function() {
  $("#oButton").click(function() {
    $(".sTable").append("<td>Orange</td");
    $(".sTable").append("<td><form><input id = 'oupdateQuantity' type='number' name='ooquantity' min='1'max='10'></form></td>");
    $(".sTable").append("<td>75 cents</td>");
    $(".sTable").append("<td id = 'oPrice'></td>");

  });
});


$(document).ready(function() {
  $("button").click(function() {
    $(".disappear").hide();
  });

});

$(document).ready(function() {
  $(".button").click(bquantity)
  $(".button").click(oquantity)

});


function bquantity() {
  var quantity = document.getElementById('bupdateQuantity').value;
  var price = quantity * .5;
  var bPrice = document.getElementById('bPrice');
  bPrice.innerHTML = "$" + price;
}

function oquantity() {
  var oquantity = document.getElementById('oupdateQuantity').value;
  console.log(oquantity);
  var oprice = oquantity * .75;
  var oPrice = document.getElementById('oPrice');
  oPrice.innerHTML = "$" + oprice;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: aqua;
  text-align: center;
  padding: 14px 16px 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: black;
  border-bottom: 1px solid black;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 50px;
}

.button:hover {
  color: #4CAF50;
  background-color: white;
}

.sTable {
  border-collapse: collapse;
  width: 75%;
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="script.js"></script>



  <div id="navigation" class="disappear">
    <ul>
      <li>
        <a href="index.html">
          <h2>Home</h2>
        </a>
      </li>
      <li>
        <a href="#">
          <h2>Cart</h2>
        </a>
      </li>

    </ul>
  </div>
  <table cellspacing="50" class="disappear">
    <th>
      <h2>Banana</h2>
    </th>
    <th>
      <h2>Orange</h2>
    </th>
    <th>
      <h2>Apple</h2>
    </th>
    <tr>
      <td><img src="https://img.purch.com/rc/300x200/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA2NS8xNDkvb3JpZ2luYWwvYmFuYW5hcy5qcGc="></td>
      <td><img src="https://www.oasis-botanical.ca/wp-content/uploads/2017/02/orange-web.jpg" alt="Image description" width="215px" />
      </td>
      <td><img src="https://images-na.ssl-images-amazon.com/images/I/918YNa3bAaL._SL1500_.jpg" width="200px"></td>
    </tr>
    <tr>
      <td>
        <h3>50 cents per bunch</h3>
      </td>
      <td>
        <h3>75 cents per orange</h3>
      </td>
      <td>
        <h3>60 cents per apple</h3>
      </td>
    </tr>
    <tr>
      <td><button id="bButton">Add To Cart</button></td>
      <td><button id="oButton">Add To Cart</button></td>
      <td><button id="aButton">Add To Cart</button></td>
    </tr>
  </table>
  <table id="shoppingTable" class="sTable" style="margin-top:50px;">
    <th>Item Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total</th>
    <tr>
    </tr>
  </table>
  <a href="#" class="button" class="disappear">Update Cart</a>
</body>

</html>

Answer 1

问题在于：

$(document).ready(function(){
  $(".button").click(bquantity)
  $(".button").click(oquantity)
});

在“更新”按钮单击事件上，您更新了bquantity和oquantity，但是您没有创建这两个html。您只有与单击按钮相关的一个（bButton / oButton）。你必须将这些事件分开。

无法读取null的属性值

1 个答案: