javascript calculator in formula

Samuel Oliveira · 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

davej · 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>

Samuel Oliveira · June 29, 2016

Thank you for your help.

Samuel Oliveira · June 29, 2016

Another question is, how do i put in decimals?

davej · 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" />

Samuel Oliveira · 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>

Ingolme · June 30, 2016

There aren't exponents in Ohm's law. Can you show an example of what you're trying to do?

Samuel Oliveira · 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>

Samuel Oliveira · June 30, 2016

And yes, you can put exponents in Ohm's law

davej · 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>

Samuel Oliveira · June 30, 2016

it's like for example 3e-3 * 2e-2

Ingolme · 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.

davej · 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.

Ingolme · June 30, 2016

I would avoid input type="number" if you want that much flexibility. Just use type="text" instead.

javascript calculator in formula

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in