Need help displaying calculations from a form using Javascript

Question

I created a simple site that asks the user the type of shirt they want, and what color. Each selection has a value. I want the total cost of the users selection to be displayed. So far implementing the Javascript has been giving me trouble.

Here is my html code as well as my attempted 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>

What is `parseInt(shirt)` supposed to return? You never defined that variable, and you use it for all the variables. — Barmar, Feb 19 '18 at 04:13
FYI, `colorSelect.options[colorSelect.SelectedInex].value;` can be simplified to just `colorSelect.value`. — Barmar, Feb 19 '18 at 04:14
You have a typo: `SelectedInex` should be `selectedIndex`. You left out the `d` in `Index`, and `s` should be lowercase. — Barmar, Feb 19 '18 at 04:16
The errors in the Javascript console should be helping you figure out all the problems in your code. — Barmar, Feb 19 '18 at 04:16
parseInt(shirt) I would like to return the value that each shirt is declared as. So I can apply that value to the calculation for the users total price — Miguel Benjamin, Feb 19 '18 at 04:17
You need to find out which radio button the user chose, and use that shirt's price. — Barmar, Feb 19 '18 at 04:18
1. I think you want to `parseInt` with each element's `value` property - `blank = parseInt(blank.val);` 2. You also need to look at each of the elements you retrieved and check if the `checked` property is truthy. Did you remove some code here? I would declare `shirt` and then check each input to see if it's checked, and if so call `parseInt` on that specific element's `value` property, assigning it to shirt. Other ways to do this, but I think it would get you what you wanted. — John Halbert, Feb 19 '18 at 04:19
See [how to get value of selected radio button](https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) — Barmar, Feb 19 '18 at 04:20
I added document.querySelector("input[name="selectedShirt"]:checked").value; Into my calculate function doesnt seem to be working — Miguel Benjamin, Feb 19 '18 at 04:34

score 0 · Answer 1 · answered Feb 19 '18 at 04:43

Much simpler approach.

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>

score 0 · Accepted Answer · answered Feb 19 '18 at 04:55

Working code with script inside the HTML page.

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

console.log I just added to see the result in the console. That was for checking what value it has. It is not part of the code. You may delete it. — Cyber Square Professional, Feb 19 '18 at 05:15

Need help displaying calculations from a form using Javascript

2 Answers2