Trying to use Input as Variables in equation HTML and Javascript

1

I want user input on the webpage to become variables I can use in an equation.
I then want the answer to display on the page. I’m not sure where to learn this. Any recommendations or answers to where I’m going wrong would be greatly appreciated.


<body>  
  <h1>Circle Skirt Calculator</h1>
<div id="type">
  <p>What type of circle skirt?</p>
  <label class="block"><input type=radio name="type" id="typeInput" value="2" class="input-radio">full circle</input></label>
  <label class="block"><input id="typeInput" type=radio name="type" value="1" class="input-radio">half circle</input></label>
  <label class="block"><input id="typeInput" type=radio name="type" value=".5" class="input-radio">quarter circle</input></label>
<label class="block"><input id="typeInput" type=radio name="type" value="1.5" class="input-radio">3/4 circle</input></label>
  <label class="block"><input id="typeInput" type=radio name="type" value="4" class="input-radio">double circle </input>
</label>
</div>
   
    <div class="form-group">
      <label id="waist-label" for="waist">Waist</label>
      <input
        type="value"
        name="waist"
        id="waistInput"
        class="form-control"
        placeholder="Enter your waist measurement"
        required
      />
     </div>
    <div class="form-group">
      <label id="length-label" for="length">Length</label>
      <input
        type="value"
        name="length"
        id="lengthInput"
        class="form-control"
        placeholder="Enter your length"
        required
      />
       </div>
    <div class="form-group">
      <label id="sa-label" for="sa">Seam Allowence</label>
      <input
        type="value"
        name="sa"
        id="SAInput"
        class="form-control"
        placeholder="Enter your seam allowence"
        required
      />
      </div>
   <div class="form-group">
      <label id="sa-label" for="sa">Hem</label>
      <input
        type="value"
        name="hem"
        id="hemInput"
        class="form-control"
        placeholder="Enter your hem"
        required
      />
      </div>
 <div class="form-group">
      <p>
        How many seams will the finished skirt have?
      </p>
      <select id="seamNumInput" name="seamnumber" class="form-control" required>
        <option disabled selected value>Select an option</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>                         <option value="6">6</option>

      </select>
    </div>

<div class="buttondiv">
  <button type="button" id="submit" class="submit-button" 
         onclick="getInputValue()">
 Submit</button>
</div>

<div class="answer"><center>
  <p id= "small"> Small Radius </p></center></div>

    <div class="answer"><center>
  <p id= "large"> Large Radius</p></center></div>
  <script> 
        // Here the value is stored in new variable x  
  
        function getInputValue() { 
var waist = document.getElementById("waistInput").value; 
var Hem = document.getElementById("hemInput").value;
var SA = document.getElementById("SAInput").value;
var Length = document.getElementById("lengthInput").value;
var Type = document.getElementById("typeInput").value;
var SeamNum = document.getElementById("seamNumInput").value;
                 
                      
var Answer = ( Waist + ( SeamNum * 2 * SA ) ) / 3.14 / Type - SA;  
    
var Answer2 = answer + hem + length;
          
          document.getElementById( 
              "small").innerHTML = answer; 
                    
          document.getElementById( 
              "large").innerHTML = answer2;
        } 
    </script>
</body>
2

I suggest you have the developer console open when you click the submit button, you will get a message that might help you out. This is a good reminder to be consistent in how you name your variables :slight_smile:

3

Thank you! Such a silly thing caused me so much frustration.
And now I’m realizing JavaScript isn’t solving my equations and is just writing the numbers next to each other.