How do you place the selection of a drop down menu and an input field into an equation?

What am I doing

I have a picture framing calculator which caters to calculating the appropriate matting for someone’s picture framing needs.

How I’m doing it

Here’s the code snippet:

* {
  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;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
     justify-content: center;
  }

  body > sides {
    background-color: whitesmoke;
    margin: 0 .25em; /* for gap */
    width: 60%;
  }


/* 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>
    <sides>
        
<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="frameWidth" id="wf" required><select name="frameWidth" id="wff">
    <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)
    
    if (!wf || !hf|| !wp || !hp || !o) {
        alert('Fields are missing!')
        return 
    }


   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>
    </sides>
    <sides>
        
<center>
    <div style="width:400px;height:50px;;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
        <center>
            <div id="width"></div>
        </center>
    
        <div id="height"></div>
    </div>
</center>
    </sides>
</body>

</html>

Here’s what I have

The current equations are:

  • var width = (1/2)*(hf-hp+o);

  • var height = (1/2)*(wf-wp+o);

My code solves the current calculation without the selection of the drop down menu. This image shows a correct output without changing the equations which doesn’t include a drop down selection on the right hand side of the input:

Current equations solving correctly

The Problem

I am trying to alter my equations to include my input and a selected value combined. I updated the code snippet from another answer which I was instructed combined the two fields. And I updated both equations with how I think it should go, but now receive the error NaN NaN/1. And here is the updated code from that:

* {
  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;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
     justify-content: center;
  }

  body > sides {
    background-color: whitesmoke;
    margin: 0 .25em; /* for gap */
    width: 60%;
  }


/* 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>
    <sides>
        
<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="frameWidth" id="wf" required><select name="frameWidth" id="wff">
    <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)
    
    if (!wf || !hf|| !wp || !hp || !o) {
        alert('Fields are missing!')
        return 
    }


   var width = (1/2)*(hf+hpf-hp+hpf+o);
   var height = (1/2)*(wf+wff-wp+wpf+o);

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

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

}

</script>
    </sides>
    <sides>
        
<center>
    <div style="width:400px;height:50px;;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
        <center>
            <div id="width"></div>
        </center>
    
        <div id="height"></div>
    </div>
</center>
    </sides>
</body>

</html>

However, this is an image of the result when I attempt the new equations:

Calculator with script changes

What I’ve tried

I’ve tried the following equations:

  1. var width = (1/2)*(hf+hpf-hp+hpf+o); and var height = (1/2)*(wf+wff-wp+wpf+o);
  2. var width = (1/2)*((hf+hpf)-(hp+hpf)+o); and var width = (1/2)*((hf+hpf)-(hp+hpf)+o);