Change calculation Based on select value dropdown Javascript
Question
I'm trying to create a calculation app based on dropdown form values. I'd like to have the equation used changed based on what value is selected. The intake value works on submit, but exhaust does not. The intake valve value is calculated based on this formula:
const calcIn = ((t + 1.54) * (v - 0.13));
The intake displays fine but when I switch the dropdown to exhaust the output value does not change.
function calculateInt() { const v = document.getElementById('v').value; const t = document.getElementById('t').value; const form = document.getElementById('valves'); const calcIn = ((t + 1.54) * (v - 0.13)); const ans1 = Math.floor(calcIn); const calcEx = ((t + 1.69) * (v - 0.22)); const ans2 = Math.floor(calcEx); if (form.value || 'intake') { document.getElementById('result').value = ans1; } else if (form.value || 'exhaust') { document.getElementById('result').value = ans2; } else { return 'No Inputs'; } };
* { margin: 0; } h1, h2, a, p { font-family: "Nunito", sans-serif; } #nav { width: 100%; height: 60px; background-color: #010658; position: fixed; } #nav ul { list-style: none; width: 100%; display: inline-flex; padding: 20px; } #nav li a { text-decoration: none; padding: 20px; font-size: 20px; color: #ffff; } #nav li a:hover { color: #9B9B9D; } main { text-align: center; height: 100%; width: 100%; padding-top: 100px; } #vehicle { display: flex; align-items: center; flex-direction: column; } #vehicle { margin-bottom: 40px; } #vehicle select { padding: 6px; border-radius: 4px; box-shadow: none; border-color: #010658; } #vehicle button { width: 120px; height: 30px; background-color: #010658; border-color: #010658; border-radius: 4px; color: #fff; cursor: pointer; } #vehicle input { margin-top: 40px; padding: 6px; border-radius: 4px; box-shadow: none; border-color: #010658; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <title>Calculator</title> </head> <body> <header id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="calc.html">Calculator</a></li> <li><a href="about.html">About</a></li> </ul> </header> <main> <div id="container"> <form id="vehicle"> <div> <select name="vehicles" onchange=""> <option value="14-Forester">2014 Forester</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="valves" name="valves"> <option value="intake">Intake Valve</option> <option value="exhaust">Exhaust Valve</option> </select> </div> <input type="text" placeholder="Measured Clearance" id="v"> <input type="text" placeholder="Current Shim" id="t"> <button type="button" id="submit-btn" onclick="calculateInt();">Calculate</button> <input type="text" id="result"> </form> </div> </main> <script type="text/javascript" src="scripts/jq.js"></script> <script type="text/javascript" src="scripts/js.js"></script> </body> </html>
2 answers
solution1
0 2018-12-26 03:37:58
You need to use == , not || , in your if statements:
if (form.value == 'intake') {
document.getElementById('result').value = ans1;
} else if (form.value == 'exhaust') {
document.getElementById('result').value = ans2;
}
Also, since there are only two options, you don't need the else statement.
solution2
0 2018-12-26 03:41:12
Okay so your calculations run fine on the first go. Now when you actually switch the input's value you have no code to "listen" for that. All you need to do is create an event listener that listens for the change in value in your input then call the calculateInt() function again.
so you have to create a var for your form element and then add an on change event to the form that runs the calculateInt function everytime your select input values change.
ex. form.addEventListener('onChange',calculateInt);
And make sure you check your conditionals in your if statement. you want to run an equality check instead of an OR statement so use "==" or "===" (strict equality) instead of the "||"( OR) statement.
code Sure no problem.
Outside of your calculateInt function you can place these two lines
EDIT EXAMPLE BELOW
const form = document.getElementById('valves'); form.addEventListener('change',calculateInt);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.