Sanders
Reputation: 30
How to combine the numbers of an input field and an option from a drop down selection in order to solve an equation?
I am building a picture framing matting calculator. The problem I'm having is that I have an <input type="number"> and a <select> with <option value> elements that need to be combined to calculate an equation. The two fields, say I input 16 and I use the drop down menu (next to that input field) to select 1/4, to form 16 1/4 - the 1/4 is not being combined with the 16 when the "Calculate" button is pressed to solve the equation.
Here is my code snippet:
* {
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/[email protected]/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>What I've tried
- I've attempted to set the both the id's the same in an effort to add them together.
- As one id example, I've added:
var wff = document.getElementById('wff').valueto my code, then changed my formula to:var height = (1/2)*(wf+wff-wp+o);
Both attempts did not work, so I need direction how to combine the numbers of the input & the drop down selection, so I can add it to my equation.
Here are two images reflecting the issue:
.
Upvotes: 1
Views: 93
Answers (1)
Aman Sharma
Reputation: 964
you need to change string to the interger or float by using parseFloat and parseInt
I have added the solution for this. Below
* {
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/[email protected]/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)
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>Upvotes: 2
Related Questions
- How do you place the selection of a drop down menu and an input field into an equation?
- How to select value from dropdown in javascript and multiply with entered number from textbox
- HTML form - need user to be able to choose an option from a dropdown list and then also enter a number into another field?
- How can i get the drop down selected values and form an number
- Calculate the values from select option with Javascript and/or jQuery
- Can't Calculate Automatically Javascript with Dropdown not Typing the number
- Multiply Dropdown Field to Text Field in Javascript
- how to multiply a input text value by selecting from option value
- JavaScript: Calculating inputs (select input) and resulting a number
- jQuery equations for dropdown selections