使靜態函數成爲動態

我正在做一個練習來學習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();

來源

2017-02-21 randseed1724

請修改您的問題以包含相關代碼。外部鏈接斷開，使得這個問題及其答案對未來的訪問者不太有用。 –

當然，我現在要做 – randseed1724

也許這更適合http://codereview.stackexchange.com/？ – Jan

爲了您用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; 
}

現在我們不擔心某行丟失，因爲我們通過所有現有行迭代。在計算所有行的總價格時，可以採用類似的方法，只是循環遍歷每行總價格，將它們相加，然後將總數分配到總價格標籤。

來源

2017-02-21 17:46:30 colinmcp

使靜態函數成爲動態

回答

相關問題