[英]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.