CODEWITHSUNDEEP
javascripthtmljquery
Sanders
Sanders

Reputation: 30

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:

#height {
  text-align: left;
  margin-top: 250px;
  margin-left: 4px;
}
<!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="frameHeight" 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="pictureWidth" 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="pictureHeight" 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="matOverlap" id="o">
            <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 + hff) - (hp + hpf) + o);
        var height = (1 / 2) * ((wf + wpf)- (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:500px;height:300px;;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>

My code solves the equation without the selection of the drop down menu. This image shows a correct output using the old equations and not making a selection from the drop down menu. The only exception is the "Mat Overlap:" selection which works!

Current equations solving correctly

The Problem

I am trying to alter my equations to include my input and the drop down selection. I updated both equations with how I think it should go, but now receive the error NaN NaN/1. However, this is an image of the result when I attempt the new equations and I try to utilize the drop down menu.:

Calculator with script changes

The Mat Overlap drop down menu works, but the incorporation of the drop down menus which correspond with the Frame Width, Frame Height, Picture Width, and Picture Height are creating the error I believe. I can't figure what I'm missing.

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)*((wf+wff)-(wp+wpf)+o);

Upvotes: 1

Views: 74

Answers (1)

Sanders
Sanders

Reputation: 30

This was two topics that came together.

  1. How to combine the numbers of an input field and an option from a drop down selection in order to solve an equation?

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

This discussion concerned placing the mathematics together for the equations. By change string to the interger or float by using parseFloat and parseInt I have added the solution. All variables were declared & added to the equation. Solution is available above on link #1.

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

Hello, the Map Overlap is using parseFloat while the others is using parseInt. If you want to use parseInt you need to specify 0 in front the decimal parseInt(0.0625). Otherwise it will become Nan. – fatin amirah

This question addressed how the change affected the replacement, newer equations. As they simply would not work.

The solution to this problem

Changing all drop down numbers to have a 0 in front of the decimal. For example, 0.0 became 0, .75 became 0.75. And completely removed all instances of the following: <option value="none" selected="selected"> -- choose one --</option>. This has eliminated the 'NaN' issue.

The final Fiddle can be found here: https://jsfiddle.net/1rcmoj9x/1/

Upvotes: 1

Related Questions