如何将下拉菜单和输入字段的选择放入方程式中？
[英]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/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.这张图片显示了一个正确的 output 使用旧方程，而不是从下拉菜单中进行选择。 The only exception is the "Mat Overlap:" selection which works!唯一的例外是“垫子重叠：”选择有效！
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 .我用我认为go 的方式更新了两个方程，但现在收到错误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. Mat Overlap下拉菜单有效，但与Frame Width 、 Frame Height 、 Picture Width和Picture Height对应的下拉菜单的合并正在产生我认为的错误。 I can't figure what I'm missing.我无法弄清楚我错过了什么。
What I've tried我试过的
I've tried the following equations:我尝试了以下等式：
-
var width = (1/2)*(hf+hpf-hp+hpf+o);andvar height = (1/2)*(wf+wff-wp+wpf+o);和var height = (1/2)*(wf+wff-wp+wpf+o); -
var width = (1/2)*((hf+hpf)-(hp+hpf)+o);andvar width = (1/2)*((wf+wff)-(wp+wpf)+o);和var width = (1/2)*((wf+wff)-(wp+wpf)+o);
1 个解决方案
解决方案1
0 已采纳 2022-01-25 07:27:08
Thank you谢谢
- 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.
- 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 was two topics that came together.这是两个结合在一起的话题。
- How to combine the numbers of an input field and an option from a drop down selection in order to solve an equation? 如何结合输入字段的数字和下拉选择中的选项来求解方程？
This discussion concerned placing the mathematics together for the equations.
- How do you place the selection of a drop down menu and an input field into an equation? 如何将下拉菜单和输入字段的选择放入方程式中？
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
0in front of the decimal.0。 For example,0.0became0,.75became0.75.0.0变成0，.75变成0.75。And completely removed all instances of the following:
<option value="none" selected="selected"> -- choose one --</option><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/最终的小提琴可以在这里找到： https://jsfiddle.net/1rcmoj9x/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.