堆栈内存溢出
  繁体   English   中英

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

[英]Need help displaying calculations from a form using Javascript

 原文  2018-02-19 04:03:40  6   2    javascript/ html

问题描述

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

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

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

2 个解决方案

解决方案1
 0  2018-02-19 04:43:54

更简单的方法。 

 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>

解决方案2
 0 已采纳  2018-02-19 04:55:19

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在使用javascript显示可读日期方面需要帮助 在使用javascript或jquery提交表单时需要帮助 在使用javascript在矩形上显示选择句柄时需要帮助 显示计算在不同的html页面上，从javascript 需要帮助，使用JavaScript从新HTML页面上的HTML表单返回数据 Javascript显示输出计算 需要帮助获取和使用 JavaScript 中的 HTML 形式的用户输入 需要帮助，在显示javascript函数值时 需要帮助正确显示明天的日期，javascript Javascript-需要帮助，将用户输入从表单转换为HTML
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM