How to combine the numbers of an input field and an option from a drop down selection in order to so-CodePudding

I am building a .

$Image shows when a drop down menu is used - the calculation results into the same answer as above (which in this case would be a wrong answer because the fraction wasn't taken into account.$

CodePudding user response：

you need to change string to the interger or float by using parseFloat and parseInt I have added the solution for this. Below

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}


/*Fieldset and legend */

fieldset {
  margin: 2em 0;
  padding: 1em 2em;
  border: solid 1px #ccc;
  border-radius: 6px;
  min-width: P 200px;
}

legend {
  font-size: 1.25em;
  padding: 0 .25em;
  color: #999;
}


/* Labels */

label {
  display: block;
  margin-top: 1em;
}

.checks label {
  margin-top: 0;
}

label:first-of-type {
  margin-top: 0;
}

/* Select */

select {
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3;
  font-family: 'Lato', sans-serif;
  font-size: .8em;
}

#wff, #hff, #wpf, #hpf {
  margin-left: 1em;
  margin-top: auto;
  margin-bottom: auto;

  }
  
  body {
    background-color: white;
    padding: 2em;
  }


/* Inputs and textarea */

input {
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}

input[type="number"],
input[type="text"] {
  width: 10em;
  background-color: #D3D3D3
}

textarea {
  min-height: 8em;
  min-width: 100%;
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}


/* radio buttons and checkboxes */

.checks {
  margin-bottom: 1em;
}

.checks p {
  margin-bottom: 0;
}

input[type="checkbox"] label,
input[type="radio"] label {
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

input[type="radio"] {
  margin-left: 1.5em;
  margin-right: 0;
}

input[type="radio"]:first-of-type {
  margin-left: 0;
}

#height {
  text-align: left;
  margin-top: 250px;
  margin-left: 4px;
}


/* Submit Button */

input[type="button"] {
  padding: .5em 1em;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: .8em;
}


/* Large screen rules */

@media screen and (min-width: 430px) {
  legend {
    font-size: 1.75em;
  }
  fieldset {
    width: 40%;
    min-width: 320px;
    margin: auto;
  }
  .checks label {
    display: inline-block;
    padding-top: .5em;
    margin-top: 0;
    margin-right: .5em;
  }
}

<!DOCTYPE html>

<html lang="en">

    <head>
    
        <meta charset="UTF-8">

        <meta name "viewport" content="width=device-width,

        initial-scale=1.0">

        <title>I Was Framed - Calculator</title>



        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="style.css">

    </head>

<body>

<section>

<form id="frm1" action="form_action.asp">

<fieldset>

<legend>

I Was Framed Calculator

</legend>



<label for="frameWidth">Frame Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wf" id="wf" required><select name="wff" id="wff" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option> 
                <option value=".9375">15/16</option>
</select>

<label for="frameHeight">Frame Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hf" id="hf" required><select name="hff" id="hff" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select>



<label for="pictureWidth">Picture Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wp" id="wp" required><select name="wpf" id="wpf" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select>

<label for="pictureHeight">Picture Height:</label><input type="number"onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hp" id="hp" required><select name="hpf" id="hpf" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select><br>

<label for="matOverlap">Mat Overlap:</label><select name="o" id="o" required>
    <option value="none" selected="selected"> -- choose one --</option>
    <option value=".0">0</option>
        <option value=".0625">1/16</option>
            <option value=".0125">1/8</option>
                <option value=".1875">3/16</option>
                <option value=".25">1/4</option>
                <option value=".3125">5/16</option>
                <option value=".375">3/8</option>
                <option value=".4375">7/16</option>
                <option value=".50">1/2</option>
                <option value=".5625">9/16</option>
                <option value=".625">5/8</option>
                <option value=".6875">11/16</option>
                <option value=".75">3/4</option>
                <option value=".8125">3/16</option>
                <option value=".875">7/8</option>
                <option value=".9375">15/16</option>
</select>

    <br>


<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>

</fieldset>

</form>

</section>

<script src="https://unpkg.com/[email protected]/index.js"></script>

<script>

function calc()

{

    var wf = document.getElementById('wf').value
    wf = parseInt(wf)

    var wff = document.getElementById('wff').value
    wff = parseInt(wff)
    
    var hf = document.getElementById('hf').value
    hf = parseInt(hf)

    var hff = document.getElementById('hff').value
    hff = parseInt(hff)
    
    var wp = document.getElementById('wp').value
    wp = parseInt(wp)

    var wpf = document.getElementById('wpf').value
    wpf = parseInt(wpf)
    
    var hp = document.getElementById('hp').value
    hp = parseInt(hp)

    var hpf = document.getElementById('hpf').value
    hpf = parseInt(hpf)
    
    var o = document.getElementById('o').value
    o = parseFloat(o)
   var width = (1/2)*(hf-hp o);
   var height = (1/2)*(wf-wp o);

   document.getElementById('width').innerHTML = new Fraction(width).toString();
   document.getElementById('height').innerHTML = new Fraction(height).toString();

   document.getElementById('rectangle').scrollIntoView({ behavior: 'smooth'})

}

</script>


<center>
    <div style="width:75%;height:0;border:5px solid #000; margin-top: 30px; margin-bottom: 30px;padding-bottom:75%;background-color:gray" id="rectangle">
        <center>
            <div id="width"></div>
        </center>
   
        <div id="height"></div>
    </div>
</center>


</body>

</html>