>source

자바 스크립트를 처음 사용합니다. 비누 회사를위한 웹 사이트를 만들고 있습니다. 고객이 제품, 크기 및 수량을 선택한 후 가격을 계산하려면 자바 스크립트가 필요합니다. 여기 링크가 있습니다: 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>

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


  • 답변 # 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>
    
    

  • 이전 model view controller - ID (ID가 이미 사용됨)가 아닌 데이터의 자동 증분 (int type) ASPNET MVC
  • 다음 bash - Codenvy의 명령에 대한 올바른 형식