I have a picture framing calculator which caters to calculating the appropriate matting for someone's picture framing needs.
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/fractional@1.0.0/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!
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.:
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.
I've tried the following equations:
var width = (1/2)*(hf+hpf-hp+hpf+o);
and var height = (1/2)*(wf+wff-wp+wpf+o);
var width = (1/2)*((hf+hpf)-(hp+hpf)+o);
and var width = (1/2)*((wf+wff)-(wp+wpf)+o);
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
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 on above link on #1
This question addressed how the change affected the replacement, newer equations. As they simply would not work.
Changing all drop down numbers to have a
0
in front of the decimal. For example,0.0
became0
,.75
became0.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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.