[英]How to combine the numbers of an input field and an option from a drop down selection in order to solve an equation?
我正在构建一个图片框架消光计算器。 我遇到的问题是我有一个<input type="number">和一个带有<option value>元素的<select>需要组合起来计算一个方程。 这两个字段，比如说我输入 16，然后我使用下拉菜单（该输入字段旁边）到 select 1/4，形成 16 1/4 - 当“计算”时，1/4 没有与 16 组合" 按钮被按下以求解方程。
这是我的代码片段：
* { margin: 0; padding: 0; font-family: 'Lato', sans-serif; } /*Fieldset and legend */ fieldset { margin: 2em 0; padding: 1em 2em; border: solid 1px #ccc; border-radius: 6px; min-width: P 200px; } legend { font-size: 1.25em; padding: 0.25em; color: #999; } /* Labels */ label { display: block; margin-top: 1em; }.checks label { margin-top: 0; } label:first-of-type { margin-top: 0; } /* Select */ select { padding: .5em; border: solid 1px #999; background-color: #D3D3D3; font-family: 'Lato', sans-serif; font-size: .8em; } #wff, #hff, #wpf, #hpf { margin-left: 1em; margin-top: auto; margin-bottom: auto; } body { background-color: white; padding: 2em; } /* Inputs and textarea */ input { padding: .5em; border: solid 1px #999; background-color: #D3D3D3 } input[type="number"], input[type="text"] { width: 10em; background-color: #D3D3D3 } textarea { min-height: 8em; min-width: 100%; padding: .5em; border: solid 1px #999; background-color: #D3D3D3 } /* radio buttons and checkboxes */.checks { margin-bottom: 1em; }.checks p { margin-bottom: 0; } input[type="checkbox"]+label, input[type="radio"]+label { display: inline-block; padding-top: 0; margin-top: 0; } input[type="radio"] { margin-left: 1.5em; margin-right: 0; } input[type="radio"]:first-of-type { margin-left: 0; } #height { text-align: left; margin-top: 250px; margin-left: 4px; } /* Submit Button */ input[type="button"] { padding: .5em 1em; border-radius: 6px; background-color: #333; color: #fff; font-family: 'Lato', sans-serif; font-size: .8em; } /* Large screen rules */ @media screen and (min-width: 430px) { legend { font-size: 1.75em; } fieldset { width: 40%; min-width: 320px; margin: auto; }.checks label { display: inline-block; padding-top: .5em; margin-top: 0; margin-right: .5em; } }
<,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> <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="wf" id="wf" required><select name="wff" id="wff" 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="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="hff" 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="wpf" 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="hpf" 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="o" id="o" 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> <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 var hf = document.getElementById('hf').value var wp = document.getElementById('wp').value var hp = document.getElementById('hp').value var o = document.getElementById('o');value var width = (1/2)*(hf-hp+o); var height = (1/2)*(wf-wp+o). document.getElementById('width').innerHTML = new Fraction(width);toString(). document.getElementById('height').innerHTML = new Fraction(height);toString(). document.getElementById('rectangle'):scrollIntoView({ behavior: 'smooth'}) } </script> <center> <div style="width;75%:height;0:border;5px solid #000: margin-top; 30px: margin-bottom; 30px:padding-bottom;75%:background-color:gray" id="rectangle"> <center> <div id="width"></div> </center> <div id="height"></div> </div> </center> </body> </html>
var wff = document.getElementById('wff').value ，然后将公式更改为： var height = (1/2)*(wf+wff-wp+o);两种尝试都没有奏效，所以我需要指导如何组合输入的数字和下拉选择，所以我可以将它添加到我的等式中。
这是反映该问题的两张图像：
.
您需要使用parseFloat和parseInt将string更改为interger或float ，我为此添加了解决方案。 以下
* { margin: 0; padding: 0; font-family: 'Lato', sans-serif; } /*Fieldset and legend */ fieldset { margin: 2em 0; padding: 1em 2em; border: solid 1px #ccc; border-radius: 6px; min-width: P 200px; } legend { font-size: 1.25em; padding: 0.25em; color: #999; } /* Labels */ label { display: block; margin-top: 1em; }.checks label { margin-top: 0; } label:first-of-type { margin-top: 0; } /* Select */ select { padding: .5em; border: solid 1px #999; background-color: #D3D3D3; font-family: 'Lato', sans-serif; font-size: .8em; } #wff, #hff, #wpf, #hpf { margin-left: 1em; margin-top: auto; margin-bottom: auto; } body { background-color: white; padding: 2em; } /* Inputs and textarea */ input { padding: .5em; border: solid 1px #999; background-color: #D3D3D3 } input[type="number"], input[type="text"] { width: 10em; background-color: #D3D3D3 } textarea { min-height: 8em; min-width: 100%; padding: .5em; border: solid 1px #999; background-color: #D3D3D3 } /* radio buttons and checkboxes */.checks { margin-bottom: 1em; }.checks p { margin-bottom: 0; } input[type="checkbox"]+label, input[type="radio"]+label { display: inline-block; padding-top: 0; margin-top: 0; } input[type="radio"] { margin-left: 1.5em; margin-right: 0; } input[type="radio"]:first-of-type { margin-left: 0; } #height { text-align: left; margin-top: 250px; margin-left: 4px; } /* Submit Button */ input[type="button"] { padding: .5em 1em; border-radius: 6px; background-color: #333; color: #fff; font-family: 'Lato', sans-serif; font-size: .8em; } /* Large screen rules */ @media screen and (min-width: 430px) { legend { font-size: 1.75em; } fieldset { width: 40%; min-width: 320px; margin: auto; }.checks label { display: inline-block; padding-top: .5em; margin-top: 0; margin-right: .5em; } }
<,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> <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="wf" id="wf" required><select name="wff" id="wff" 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="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="hff" 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="wpf" 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="hpf" 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="o" id="o" 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> <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 hf = document.getElementById('hf').value hf = parseInt(hf) var wp = document.getElementById('wp').value wp = parseInt(wp) var hp = document.getElementById('hp').value hp = parseInt(hp) var o = document.getElementById('o');value o = parseFloat(o) var width = (1/2)*(hf-hp+o); var height = (1/2)*(wf-wp+o). document.getElementById('width').innerHTML = new Fraction(width);toString(). document.getElementById('height').innerHTML = new Fraction(height);toString(). document.getElementById('rectangle'):scrollIntoView({ behavior: 'smooth'}) } </script> <center> <div style="width;75%:height;0:border;5px solid #000: margin-top; 30px: margin-bottom; 30px:padding-bottom;75%:background-color:gray" id="rectangle"> <center> <div id="width"></div> </center> <div id="height"></div> </div> </center> </body> </html>
如何将下拉菜单和输入字段的选择放入方程式中？
[英]How do you place the selection of a drop down menu and an input field into an equation?
如何在选择其他下拉选项时从 1 个下拉列表中添加/删除 select 选项
[英]How to Add/Remove select option from 1 drop down on selection of other dropdown option
当 select 来自 ajax 的选项出现另一个输入字段时下拉
[英]Drop down when select the option from ajax another input field appear
如何通过使用javascript检查mysql数据库中的值是否存在，从选择下拉框中删除选项
[英]how to remove an option from selection drop down box by checking that the value exists in mysql database using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.