Make static functions to be dynamic

Question

I am doing an exercise to learn JavaScript. I am having issues making my program dynamic. What I want to do here is:

Create two input to let the user set up the new product data. Create a button. This button will have assigned a click event that will: 1- Get the data from the inputs. 2- Create a new product row with the data we stored. Be able to delete all items and decrease total price based on the price of reminding item. In case there is no item, total price should be 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();

Please edit your question to include the relevant code. External links break, making this question and its answer(s) less useful to future visitors. — Jordan Running
– Jordan Running, Commented Feb 21, 2017 at 17:40
Maybe this is better suited for codereview.stackexchange.com ? — Jan
– Jan, Commented Feb 21, 2017 at 17:52

colinmcp · Accepted Answer · 2017-02-21 17:46:30Z

For your getPrice() and getPrice2() functions, we can make them dynamic by changing the following:

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

and

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

These lines looks for elements with static names, instead we should give all inputs a common class name and loop through them. That way, we don't have to rely on static element IDs. For example, if we gave each input the class 'quantityinput', we can do the following:

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;
}

Now we don't have to worry about a certain row missing, since we iterate through all existing rows. A similar approach can be taken when calculating the total price for all rows, just loop through each rows total price, add them together then assign the total to the total price label.

Collectives™ on Stack Overflow

Make static functions to be dynamic

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related