Question

我创建了一个简单的网站，询问用户他们想要的衬衫类型以及颜色。每个选择都有一个值。我希望显示用户选择的总成本。到目前为止，实现Javascript一直给我带来麻烦。

这是我的html代码以及我尝试过的Javascript

＆＃13;

function calculatePrice() {
  //get data
  var blank = document.getElementById("blank");
  var long = document.getElementById("long");
  var sweater = document.getElementById("sweater");
  var graphic = document.getElementById("graphic");

  var colorSelect = document.getElementById("colorSelect");
  var color = colorSelect.options[colorSelect.SelectedInex].value;

  //convert to integers
  blank = parseInt(shirt);
  long = parseInt(shirt);
  sweater = parseInt(shirt);
  graphic = parseInt(shirt);
  color = parseInt(color);

  //calculate
  var total = shirt + color;

  //display total
  document.getElementById("displayTotal").value = total;
}

＆＃13;

<div class="form">
  <form id="clothingForm">
    <fieldset>
      <legend>Select items to order.</legend>
      <div class="shirt">
        <label class="shirtLabel">Shirts</label>
        <p><br/>
          <input type="radio" name="selectedShirt" id="blank" value="B2" onclick="calculatePrice()" />
          <label class="sLabel" for="blank">Blank Tee - $2</label>
          <p><br/>
            <input type="radio" name="selectedShirt" id="long" value="5" onclick="calculatePrice()" />
            <label class="sLabel" for="long">Longsleeve - $5</label>
            <p><br/>
              <input type="radio" name="selectedShirt" id="sweater" value="7" onclick="calculatePrice()" />
              <label class="sLabel" for="sweater">Sweater - $7</label>
              <p><br/>
                <input type="radio" name="selectedShirt" id="graphic" value="12" onclick="calculatePrice()" />
                <label class="sLabel" for="graphic">Graphic Tee - $12</label>
      </div>

      <div class="color">
        <label class="colorLabel" for="color">Color</label>
        <select id="colorSelect" name="color" onchange="calculatePrice()">
            <option value="0" id="color">Select Color</option>
            <option value="1" id="color">White + ($1)</option>
            <option value="1" id="color">Black + ($1)</option>
            <option value="2" id="color">Blue + ($2)</option>
            <option value="2" id="color">Yellow + ($2)</option>
            <option value="2" id="color">Red + ($2)</option>
            <option value="2" id="color">Pink + ($2)</option>
            <option value="4" id="color">Tie Dye + ($4)</option>
        </select>
      </div>
      <button type="button" onclick="calculatePrice()">Your Total</button>
      <input type="text" id="displayTotal" size=8>
    </fieldset>
  </form>
</div>

＆＃13;

Answer 1

更简单的方法。

function calculatePrice(element) {
  if(!this.total) {
    this.total = 0;
  }
  this.total += parseInt(element.value);
  document.getElementById("displayTotal").value = this.total;
}

<div class="form">
            <form id="clothingForm">
                <fieldset>
                    <legend>Select items to order.</legend>
                    <div class="shirt">
                        <label class="shirtLabel">Shirts</label><p><br/>
                        <input type="radio" value="2" onclick="calculatePrice(this)"/>
                        <label  class="sLabel" for="blank">Blank Tee - $2</label><p><br/>
                        <input type="radio" value="5" onclick="calculatePrice(this)"/>
                        <label class="sLabel" for="long">Longsleeve - $5</label><p><br/>
                        <input type="radio" value="7" onclick="calculatePrice(this)"/>
                        <label  class="sLabel" for="sweater">Sweater - $7</label><p><br/>
                        <input type="radio" value="12" onclick="calculatePrice(this)"/>
                        <label class="sLabel" for="graphic">Graphic Tee - $12</label>
                    </div>
                    <div class="color">
                        <label class="colorLabel" for="color">Color</label>
                        <select name="color" onchange="calculatePrice(this)">
                            <option value="0" id="color">Select Color</option>
                            <option value="1" id="color">White + ($1)</option>
                            <option value="1" id="color">Black + ($1)</option>
                            <option value="2" id="color">Blue + ($2)</option>
                            <option value="2" id="color">Yellow + ($2)</option>
                            <option value="2" id="color">Red + ($2)</option>
                            <option value="2" id="color">Pink + ($2)</option>
                            <option value="4" id="color">Tie Dye + ($4)</option>
                        </select>
                    </div>
                    <input type="text" id="displayTotal" size="8">
                </fieldset>
            </form>
        </div>

Answer 2

使用HTML页面内的脚本运行代码。

<html>
    <head><title></title></head>
    <body>

            <div class="form">
                <form id="clothingForm">
                  <fieldset>
                    <legend>Select items to order.</legend>
                    <div class="shirt">
                      <label class="shirtLabel">Shirts</label>
                      <p><br/>
                        <input type="radio" name="selectedShirt" id="blank" value="2"  />
                        <label class="sLabel" for="blank">Blank Tee - $2</label>
                        <p><br/>
                          <input type="radio" name="selectedShirt" id="long" value="5"  />
                          <label class="sLabel" for="long">Longsleeve - $5</label>
                          <p><br/>
                            <input type="radio" name="selectedShirt" id="sweater" value="7"  />
                            <label class="sLabel" for="sweater">Sweater - $7</label>
                            <p><br/>
                              <input type="radio" name="selectedShirt" id="graphic" value="12"  />
                              <label class="sLabel" for="graphic">Graphic Tee - $12</label>
                    </div>

                    <div class="color">
                      <label class="colorLabel" for="color">Color</label>
                      <select id="color" name="color" onchange="calculatePrice()">
                          <option value="0" >Select Color</option>
                          <option value="1" >White + ($1)</option>
                          <option value="1" >Black + ($1)</option>
                          <option value="2" >Blue + ($2)</option>
                          <option value="2" >Yellow + ($2)</option>
                          <option value="2" >Red + ($2)</option>
                          <option value="2" >Pink + ($2)</option>
                          <option value="4" >Tie Dye + ($4)</option>
                      </select>
                    </div>
                    <button type="button" onclick="calculatePrice()">Your Total</button>
                    <input type="text" id="displayTotal" size=8>
                  </fieldset>
                </form>
              </div>


    </body>
    <script>
        function calculatePrice() {
        console.log("blankchecked", document.getElementById("blank").checked)
        console.log("long", document.getElementById("long").checked)
        console.log("sweater", document.getElementById("sweater").checked)
        console.log("graphic", document.getElementById("graphic").checked)
         //get data
         if(document.getElementById("blank").checked){
            var blank = document.getElementById("blank").value;
            shirt = parseInt(blank);
         }
         if(document.getElementById("long").checked){
            var long = document.getElementById("long").value;

            shirt = parseInt(long);
         }
         if(document.getElementById("sweater").checked){
            var sweater = document.getElementById("sweater").value;
            shirt = parseInt(sweater);
         }
         if(document.getElementById("graphic").checked){
            var graphic = document.getElementById("graphic").value;
            shirt = parseInt(graphic);
         }

         var selectedcolor = document.getElementById("color").value;


         color = parseInt(selectedcolor);
         //calculate
         var total = shirt + color;

         //display total
         document.getElementById("displayTotal").value= total;
       }


    </script>

</html>

需要帮助使用Javascript显示表单中的计算

2 个答案: