홈>2020-09-22 12:16source

html - 자바 스크립트로 제품, 크기 및 수량으로 총 가격 계산

자바 스크립트를 처음 사용합니다. 비누 회사를위한 웹 사이트를 만들고 있습니다. 고객이 제품, 크기 및 수량을 선택한 후 가격을 계산하려면 자바 스크립트가 필요합니다. 여기 링크가 있습니다: http://cgi.sice.indiana.edu/~wl15/label.php

이 웹 사이트에서 자바 스크립트를 사용해 보았습니다 : http : // javascript-coder.com/javascript-form/javascript-calculator-script.phtml 이지만 자바 스크립트가 표시되지 않았습니다.

<html>
<body>
  <h2>Build Your Bodycare</h2>
  <form action="insertlabel.php" id="privtelabel" method="POST">
    Product:
    <select name='product' id='product' onchange="calculateTotal()" required>
      <option value="Bar Soap">Bar Soap($5)</option>
      <option value="Shave Soap">Shave Soap($6)</option>
      <option value="Shampoo Soap">Shampoo Soap($6)</option>
      <option value="Face Soap">Face Soap($7)</option>
      <option value="Spray">Spray($8)</option>
      <option value="Balm">Lip Balm($8)</option>
      <option value="Bath Soaks">Bath Soaks($10)</option>
    </select>
    <br> Quantity: <input type="text" name="quantity" id='quantity' required><br> Size:
    <select name='size' id='size' onchange="calculateTotal()">
      <option value="Regular Size(3oz)">Regular Size(3oz)</option>
      <option value="4oz">4oz (extra $2)</option>
      <option value="5oz">5oz (extra $3)</option>
    </select>
    <p>(Sizes are only for soaps.)</p>

    Price:
    <br> Base:
    <select name='base'>
      <option value="Dry Skin">Dry Skin</option>
      <option value="Neatural Skin">Neatural Skin</option>
      <option value="Oily Skin">Oily Skin</option>
      <option value="No Base">None</option>
    </select>
    <p>(Base is only for bar soaps and face soaps.)</p>
    Scent:
    <select name='scents[]' multiple="multiple" required>
      <option value="Cedarwood">Cedarwood</option>
      <option value="Citronella">Citronella</option>
      <option value="Clove">Clove</option>
      <option value="Eucalyptus">Eucalyptus</option>
      <option value="Fir Needle">Fir Needle</option>
      <option value="Geranium">Geranium</option>
      <option value="Lavadin">Lavadin</option>
      <option value="Lavender">Lavender</option>
      <option value="Lemongrass">Lemongrass</option>
      <option value="Lime">Lime</option>
      <option value="Patchouli">Patchouli</option>
      <option value="Peppermint">Peppermint</option>
      <option value="Rosemary">Rosemary</option>
      <option value="Spearmint">Spearmint</option>
      <option value="Star Anise">Star Anise</option>
      <option value="Tea Tree">Tea Tree</option>
    </select>
    <p>up to 4</p><br> Ingredients:
    <select name='ingredients[]' multiple="multiple">
      <option value="Shea Butter">Shea Butter</option>
      <option value="Unscented Mango Butter">Unscented Mango Butter</option>
      <option value="Cocoa Butter">Cocoa Butter</option>
      <option value="Fennel">Fennel</option>
      <option value="Cornmeal">Cornmeal</option>
      <option value="Syrian Rue Seeds">Syrian Rue Seeds</option>
      <option value="Rolled Oats">Rolled Oats</option>
      <option value="Colloidal Oats">Colloidal Oats</option>
      <option value="Activated Charcoal">Activated Charcoal</option>
      <option value="Bentonite Clay">Bentonite Clay</option>
      <option value="Spirulina">Spirulina</option>
      <option value="Coconut Milk Powder">Coconut Milk Powder</option>
      <option value="Pumice">Pumice</option>
      <option value="Cardamom Powder">Cardamom Powder</option>
      <option value="None">None</option>
    </select>
    <p>up to 3</p>
    <p>(Ingredients are only for bar soaps, shampoo soaps, and face soaps.)</p>
    <br> Packaging:
    <select name='packaging'>
      <option value="Co-Brand Label">Co-Brand Label</option>
      <option value="Your-Brand Label">Your-Brand Label</option>
      <option value="Your-Brand box">Your-Brand box</option>
    </select>
    <P>Please email us you artwork at info@soapysoapcompany.com.<br> If you need help with artworks, contact us: 8122698812</P>
    Name: <input type="text" name="name" required> Email: <input type="text" name="email" required> Phone: <input type="number" name="phone" required><br> Message: <input type="text" name="message"><br>(For any additional request, please leave us a message)<br><br>

    <input type="submit" value="submit order">
  </form>


<script>
var product_price = [];
product_price['Bar Soap'] = 5;
product_price['Shave Soap'] = 6;
product_price['Shampoo Soap'] = 6;
product_price['Face Soap'] = 7;
product_price['Spray'] = 8;
product_price['Balm'] = 8;
product_price['Bath Soaks'] = 10;
var size_price = [];
size_price['Regular Size(3oz)'] = 0;
size_price['4oz'] = 2;
size_price['5oz'] = 3;
function getProductPrice() {
  var soapProductPrice = 0;
  var theForm = document.forms["privtelabel"];
  var selectedProduct = theForm.elements["product"];
  soapProductPrice = product_price[selectedProduct.value];
  return soapProductPrice;
}
function getSizePrice() {
  var soapSizePrice = 0;
  var theForm = document.forms["privtelabel"];
  var selectedSize = theForm.elements["size"];
  soapSizePrice = size_price[selectedSize.value];
}
function getQuantity() {
  var theForm = document.forms["privtelabel"];
  var quantity = theForm.elements["quantity"];
  var howmany = 0;
  if (quantity.value !== "") {
    howmany = parseInt(quantity.value);
  }
  return howmany;
}
function getTotal() {
  var soapPrice = (getProductPrice() + getSizePrice()) * getQuantity();
  var total = document.getElementById('totalPrice');
  document.getElementById('totalPrice').innerHTML = "Total Price for Soap $" + soapPrice;
  total.style.display = 'block';
}
</script>
</body>
</html>

웹 사이트에서 자바 스크립트가 총 가격을 계산하고 가격을 표시 할 것으로 기대합니다. 도와 주셔서 감사합니다.

javascript html

답변 # 1

코드를 약간 줄 였지만, 길을 가기에 충분하다고 생각합니다. 당신은 자세한 내용은 코드 주석을 확인 (또는 코멘트를 떠나 뭔가 이해가되지 않는 경우에 내가 응답 할 것이다) 할 수 있습니다

//Store some references to our DOM elements
var productEl = document.querySelector('#product');
var quantityEl = document.querySelector('#quantity');
var sizeEl = document.querySelector('#size');
var totalCostEl = document.querySelector('#totalCost');
//Add the change event handlers on the applicable elements
productEl.addEventListener('change', calculateTotal);
quantityEl.addEventListener('change', calculateTotal);
sizeEl.addEventListener('change', calculateTotal);
//Store your data in an object literal (essentially creating a map)
var product_price = {}; //Noticed I replaced the [] with {}
product_price['Bar Soap'] = 5;
product_price['Shave Soap'] = 6;
product_price['Shampoo Soap'] = 6;
product_price['Face Soap'] = 7;
product_price['Spray'] = 8;
product_price['Balm'] = 8;
product_price['Bath Soaks'] = 10;
var size_price = {};   //Noticed I replaced the [] with {}
size_price['Regular Size(3oz)'] = 0;
size_price['4oz'] = 2;
size_price['5oz'] = 3;
//Here's our single event handler - called when any of the 3 elements fire a 'change' event
function calculateTotal() {
  //console.log()
  var unitCost = product_price[productEl.value];
  var additionalCost = size_price[sizeEl.value] || 0;
  var qty = quantityEl.value || 0;
  totalCostEl.textContent = `Total cost: $${(unitCost * qty) + additionalCost}`;
}

<html>
<script src="label.js" type="text/javascript"></script>
<body>
  <h2>Build Your Bodycare</h2>
  <form action="insertlabel.php" id="privtelabel" method="POST">
    Product:
    <select name='product' id='product' required>
      <option value="Bar Soap">Bar Soap($5)</option>
      <option value="Shave Soap">Shave Soap($6)</option>
      <option value="Shampoo Soap">Shampoo Soap($6)</option>
      <option value="Face Soap">Face Soap($7)</option>
      <option value="Spray">Spray($8)</option>
      <option value="Balm">Lip Balm($8)</option>
      <option value="Bath Soaks">Bath Soaks($10)</option>
    </select>
    <br> Quantity: <input type="text" name="quantity" id='quantity' required><br> Size:
    <select name='size' id='size'>
      <option value="Regular Size(3oz)">Regular Size(3oz)</option>
      <option value="4oz">4oz (extra $2)</option>
      <option value="5oz">5oz (extra $3)</option>
    </select>
    <p>(Sizes are only for soaps.)</p>

    Price: <span id="totalCost"></span>
  </form>

</body>
</html>

Python2.net

html - 자바 스크립트로 제품, 크기 및 수량으로 총 가격 계산

관련 자료