Question

我正在练习学习JavaScript。我在使程序动态化时遇到问题。我想在这里做的是：

创建两个输入以允许用户设置新产品数据。创建一个按钮。此按钮将分配一个点击事件，该事件将：1-从输入中获取数据。 2-使用我们存储的数据创建新产品行。能够根据提醒项目的价格删除所有项目并降低总价。如果没有项目，总价格应为0.

HTML：

  <!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="UTF-8">
<title>Shoping</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>
  <body>
    <div class="container">
   <header>
    <h1 class="h1 text-center mb">Shoping<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></h1>
</header>
<table class="table mb">
 <thead>
   <tr>
     <th>Products:</th>
     <th>Price:</th>
     <th>Quantity:</th>
     <th>Total:</th>
     <th>
    </th>
  </tr>
  </thead>
  <tbody id="soyTBody">
    <tr id="itemSubject">
      <th scope="row"><span id="productName">T-Shirts</span></th>
      <td class="price1"> <span class="dolar">$</span><span id="product">15</span></td>
      <td class="qty1">
        <form class="form-inline">
          <div class="form-group">
           <label for="inputQty">QTY</label>
           <input type="text" id="qty" class="form-control mx-sm-3" maxlength="3" aria-describedby="qtyItem1">
          </div>
        </form>
      </td>
      <td <span class="dolar">$</span><span id="total">0.00</span></td>
     <td class="text-right">
          <button class="delate btn btn-danger" type="button" onclick="removeItem()" value="delate">
          <input id ="delateButton" class="delateItem" type="button"  value="Delate">
        </button>
      </td>
    </tr>
    <tr id="itemSubject2">
   <th scope="row"><span id="productName">Stickers</span></th>
   <td class="price2"> <span class="dolar">$</span><span id="product2">2</span></td>
   <td class="qty2">
    <form class="form-inline">
      <div class="form-group">
       <label for="inputQty">QTY</label>
       <input type="text" id="qty2" class="form-control mx-sm-3" maxlength="3" aria-describedby="qtyItem2">
      </div>
     </form>
    </td>
    <td <span class="dolar">$</span><span id="total2">0.00</span></td>
   <td class="text-right">
      <button class="delate btn btn-danger" type="button" onclick="removeItem2()" value="delate">
      <input id ="delateButton" class="delateItem" type="button"  value="Delate">
     </button>
   </td>
  </tr>
<!-- <tr>
  <th scope="row">Stickers</th>
  <td class="price2">$1</td>
  <td class="qty2">
    <form class="form-inline">
      <div class="form-group">
       <label for="inputPassword4">QTY</label>
       <input type="text" id="qty2text" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
      </div>
    </form>
  </td>
  <td class="total-2">$0.00</td>
  <td class="text-right">
      <button class="delate btn btn-danger" type="button" value="delate">
      <span class="delateButton"><strong>Delate</strong></span>
    </button>
  </td>
</tr> -->
<!-- <tr>
  <th scope="row">Flags</th>
  <td class="price3">$2</td>
  <td class="qty3"><form class="form-inline">
    <div class="form-group">
     <label for="inputPassword4">QTY</label>
     <input type="text" id="qty3text" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    </div>
  </form>
</td>
  <td class="total3">$0.00</td>
  <td class="text-right">
    <button class="delate btn btn-danger" type="button" value="delate">
      <span class="delateButton"><strong>Delate</strong></span>
    </button>
  </td>
</tr> -->
  </tbody>
  </table>
   <div class="row text-right">

  <button class="delate btn btn-success" onclick="getPrice();getPrice2();totalPrice2()" type="submit" value="calculatePriceButton" >
  <input id ="calc-prices-button" class="calculator" type="button"  value="Calculate Prices">
 <!-- <span class="delateButton"><strong>Calculate Prices</strong></span> -->
    </button>
    </div>
    <h2 class="text-center">Total Price: $<span id="totalPrice"></span></h2>
    </div>
 </body>
</html>

JS：

 // qty

function getQty() {
var qty = document.querySelector("#qty").value;
document.querySelector("#total").innerHTML = qty;
return qty;
}

 getQty();


// qty2

function getQty2() {
var qty2 = document.querySelector("#qty2").value;
document.querySelector("#total2").innerHTML = qty2;
return qty2;
}

  getQty();


 // Price

  function getPrice() {
  var price = parseInt(document.querySelector("#product").innerHTML);
  document.querySelector("#total").innerHTML = price * getQty();
  }

  getPrice();

 // Price 2

  function getPrice2() {
  var price2 = parseInt(document.querySelector("#product2").innerHTML);
  document.querySelector("#total2").innerHTML = price2 * getQty2();
  }

  getPrice2();

  // total Price

  function totalPrice2() {
  var total = parseInt(document.querySelector("#total").innerHTML);
  var total2 = parseInt(document.querySelector("#total2").innerHTML);
  document.querySelector("#totalPrice").innerHTML = total + total2;
 }

  totalPrice2();





 //Romove Item

 function removeItem() {
  var remove = document.querySelector("#itemSubject").remove("itemSubject");
  // setTimeout(function() { alert("Your shopping cart is empty"); }, 1000);
  }

  removeItem();

   function removeItem2() {
    var remove = document.querySelector("#itemSubject2").remove("itemSubject2");
    // setTimeout(function() { alert("Your shopping cart is empty"); }, 1000);
    }

   removeItem2();

Answer 1

对于你的getPrice（）和getPrice2（）函数，我们可以通过更改以下内容使它们动态化：

var price = parseInt(document.querySelector("#product").innerHTML);

和

var price2 = parseInt(document.querySelector("#product2").innerHTML);

这些行查找具有静态名称的元素，而应该为所有输入提供一个公共类名并循环遍历它们。这样，我们就不必依赖静态元素ID。例如，如果我们为每个输入提供了“quantityinput”类，我们可以执行以下操作：

var elements = document.getElementsByClassName("quantityinput");
for(var i=0; i<elements.length; i++) {

    //  Select this element and get its quantity
    var this_total = elements[i].value;

    //  Get the price for this element by selecting the price td, then its second child
    var this_price = elements[i].parentElement.parentElement.parentElement.previousSibling.childNodes[2].value;

    //  Select the total label for this row
    var this_total_label = elements[i].parentElement.parentElement.parentElement.childNodes[1];

    //  Now update the total label for this row by multiplying the price and the quantity
    this_total_label.value = this_total * this_price;
}

现在我们不必担心缺少某一行，因为我们遍历所有现有行。在计算所有行的总价时，可以采用类似的方法，只需遍历每一行的总价格，将它们加在一起，然后将总数分配给总价格标签。

使静态函数成为动态函数

1 个答案: