[英]How do you place the selection of a drop down menu and an input field into an equation?
我有一个相框计算器，可以根据某人的相框需求计算适当的抠图。
这是代码片段：
#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>
我的代码在不选择下拉菜单的情况下求解方程。 这张图片显示了一个正确的 output 使用旧方程，而不是从下拉菜单中进行选择。 唯一的例外是“垫子重叠：”选择有效！
我正在尝试更改我的方程式以包括我的输入和下拉选择。 我用我认为go 的方式更新了两个方程，但现在收到错误NaN NaN/1 。 但是，这是我尝试新方程式并尝试使用下拉菜单时的结果图像。：
Mat Overlap下拉菜单有效，但与Frame Width 、 Frame Height 、 Picture Width和Picture Height对应的下拉菜单的合并正在产生我认为的错误。 我无法弄清楚我错过了什么。
我尝试了以下等式：
var width = (1/2)*(hf+hpf-hp+hpf+o); 和var height = (1/2)*(wf+wff-wp+wpf+o);var width = (1/2)*((hf+hpf)-(hp+hpf)+o); 和var width = (1/2)*((wf+wff)-(wp+wpf)+o);您好，Map Overlap 使用 parseFloat 而其他使用 parseInt。 如果要使用 parseInt，则需要在十进制 parseInt(0.0625) 前面指定 0。 不然就变成楠了。 ——法丁·阿米拉
您需要使用 parseFloat 和 parseInt 将字符串更改为整数或浮点数，我为此添加了解决方案。
该讨论涉及将数学放在一起以形成方程式。 通过使用 parseFloat 和 parseInt 将字符串更改为整数或浮点数，我添加了解决方案。 所有变量都被声明并添加到方程中。 解决方案可在 #1 的上述链接中找到
这个问题解决了更改如何影响替换的更新方程。 因为他们根本行不通。
将所有下拉数字更改为在小数点前有一个
0。 例如，0.0变成0，.75变成0.75。并完全删除了以下所有实例：
<option value="none" selected="selected"> -- choose one --</option>这消除了“NaN”问题。
最终的小提琴可以在这里找到： https://jsfiddle.net/1rcmoj9x/1/
如何结合输入字段的数字和下拉选择中的选项来求解方程？
[英]How to combine the numbers of an input field and an option from a drop down selection in order to solve an equation?
您如何根据选择菜单（下拉列表）实现输入（或表单）？
[英]How do you implement input( or form) dependent on a select menu(drop down list)?
基于从下拉菜单中选择的文本字段的 javascript 验证
[英]javascript validation of text field based on selection from drop down menu
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.