Samuel Oliveira Posted June 29, 2016 Share Posted June 29, 2016 Hello, I need help in how to make a formula displayed in a html page, just by inserting the numbers and calculate it. A simple formula example like the ohm's law should help me help to understand it. What steps do i need to do? Hope you could help me Samuel Link to comment Share on other sites More sharing options...
davej Posted June 29, 2016 Share Posted June 29, 2016 Here is a crude example. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ohms Law</title> <style> input{ width:50px; height:25px; text-align:center; } span#idi{ display:inline-block; vertical-align:top; text-align:center; width:60px; height:25px; border:1px solid #ccc; } #wrap{ padding:15px; width:500px; height:120px; border:1px solid #bbb; font-size:20px; font-weight:bold; } </style> </head> <body> <h1>Ohms Law</h1> <div id="wrap"> <p>I = E/R</p> <span id="idi"></span>Amperes = <input type="number" min="0" id="ide" value="0" />Volts / <input type="number" min="1" id="idr" value="1" />Ohms </div> <script> document.getElementById('ide').onchange = handler; document.getElementById('idr').onchange = handler; function handler(){ var e = Number(document.getElementById('ide').value.trim()); var r = Number(document.getElementById('idr').value.trim()); var i = e/r; document.getElementById('idi').innerHTML = i.toFixed(3); }//end of function </script> </body> </html> Link to comment Share on other sites More sharing options...
Samuel Oliveira Posted June 29, 2016 Author Share Posted June 29, 2016 Thank you for your help. Link to comment Share on other sites More sharing options...
Samuel Oliveira Posted June 29, 2016 Author Share Posted June 29, 2016 Another question is, how do i put in decimals? Link to comment Share on other sites More sharing options...
davej Posted June 29, 2016 Share Posted June 29, 2016 One way is to use type="text" for the input. Another way is to use type="number" with step="0.1" <input type="number" min="0" step="0.1" id="ide" value="0" /> Link to comment Share on other sites More sharing options...
Samuel Oliveira Posted June 30, 2016 Author Share Posted June 30, 2016 I have a doubt in how to put in negative exponent. Here is the code: fieldset> <legend>V=R*I</legend> <p> <label for="ohm">Ohm ®</label> <input type="number" name="ohm" step="0.1" min="0" /> <label for="ampere">Ampere (I)</label> <input type="number" name="ampere" step="0.1" min="0"/> </p> <p> <input type="submit" value="Calculate" /> or <input type="reset" value="Reset" /> </p> <p> <label for="volt">Volt (V)</label> <input type="volt" name="volt" type="number" /> </p></fieldset> Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 There aren't exponents in Ohm's law. Can you show an example of what you're trying to do? Link to comment Share on other sites More sharing options...
Samuel Oliveira Posted June 30, 2016 Author Share Posted June 30, 2016 When i put positive exponent it works, but in negative i doesn't. and also when put numbers like 3 * 0.4 it presents a number not so accurate like this 1.2000000000000002, instead it should be 1.2 here is the full code: <h1>Ohm's Law Calculator</h1><form id="ohmslaw" action=""><fieldset> <legend>V=R*I</legend> <p> <label for="ohm">Ohm ®</label> <input type="number" name="ohm" step="0.1" min="0" /> <label for="ampere">Ampere (I)</label> <input type="number" name="ampere" step="0.1" min="0"/> </p> <p> <input type="submit" value="Calculate" /> or <input type="reset" value="Reset" /> </p> <p> <label for="volt">Volt (V)</label> <input type="volt" name="volt" type="number" /> </p></fieldset></form><script>(function () { function calculateOhmslaw(ohm, ampere) { ohm = parseFloat(ohm); ampere = parseFloat(ampere); return (ohm * ampere) * (10/10)); } var ohmslaw = document.getElementById("ohmslaw"); if (ohmslaw) { ohmslaw.onsubmit = function () { this.volt.value = calculateOhmslaw(this.ohm.value, this.ampere.value); return false; }; }}());</script> Link to comment Share on other sites More sharing options...
Samuel Oliveira Posted June 30, 2016 Author Share Posted June 30, 2016 And yes, you can put exponents in Ohm's law Link to comment Share on other sites More sharing options...
davej Posted June 30, 2016 Share Posted June 30, 2016 <h1>Ohms Law</h1> <fieldset> <legend>V=R*I</legend> <p> <label for="ohm">Ohm (Ω)</label> <input type="number" id="ohm" step="0.1" min="0" /> <label for="ampere">Ampere (I)</label> <input type="number" id="ampere" step="0.1" min="0" /> </p> <p> <input type="button" id="btn1" value="Calculate" /> or <input type="button" id="btn2" value="Reset" /> </p> <p> <label for="volt">Volt (V)</label> <input type="text" id="volt" /> </p> </fieldset> <script> document.getElementById('btn1').onclick = handler; document.getElementById('btn2').onclick = clear; function handler(){ var r = Number(document.getElementById('ohm').value.trim()); var i = Number(document.getElementById('ampere').value.trim()); var e = i*r; document.getElementById('volt').value = e.toFixed(3); }//end of function function clear(){ document.getElementById('ohm').value = '0'; document.getElementById('ampere').value = '0'; document.getElementById('volt').value = '0'; }//end of function </script> ...OR... <h1>Ohm's Law Calculator</h1> <form id="ohmslaw" action=""> <fieldset> <legend>V=R*I</legend> <p> <label for="ohm">Ohm (Ω)</label> <input type="number" id="ohm" step="0.1" min="0" /> <label for="ampere">Ampere (I)</label> <input type="number" id="ampere" step="0.1" min="0"/> </p> <p> <input type="submit" value="Calculate" /> or <input type="reset" value="Reset" /> </p> <p> <label for="volt">Volt (V)</label> <input type="text" id="volt"/> </p> </fieldset> </form> <script> document.getElementById('ohmslaw').onsubmit = function(evt) { evt.preventDefault(); var o = parseFloat(document.getElementById('ohm').value.trim()); var a = parseFloat(document.getElementById('ampere').value.trim()); document.getElementById('volt').value = (o * a).toFixed(3); } </script> Link to comment Share on other sites More sharing options...
Samuel Oliveira Posted June 30, 2016 Author Share Posted June 30, 2016 it's like for example 3e-3 * 2e-2 Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 I see, you were referring to a particular notation. To me, an exponent is one of the operands of exponentiation. The second argument of Math.pow() is an exponent. I've done some tests and Javascript parses exponents properly with parseFloat(), whether positive or negative. Make sure there are no spaces between the "e" and the numbers that follow. Link to comment Share on other sites More sharing options...
davej Posted June 30, 2016 Share Posted June 30, 2016 If you use <input type="number" step="0.1"/> then 1e-2 or 0.01 will create an error because it is smaller than the step-size. You can use type="text" to avoid this issue, but then you won't have the little up-down arrows or the html range limits. Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 I would avoid input type="number" if you want that much flexibility. Just use type="text" instead. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now