Forum Moderators: open

Message Too Old, No Replies

Subtraction and multiplication with one click

using javascript for math

         

cgoodman

10:59 am on Mar 12, 2014 (gmt 0)

10+ Year Member



I am looking for a JavaScript code that would accept three numbers using three input boxes.
1. The first would accept a number.
2. The second would subtract from the first number.
3. The third would multiply the result from 1 and 2

50 - 2 x 3 = 300
Can that all happen with one click?

lucy24

11:17 am on Mar 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I don't see why not. Click a button, the javascript reads the content of three input fields using something like
x=getElementById("fieldid1").value
y=getElementById("fieldid2").value
z=getElementById("fieldid3").value
Check to make sure they're all numerals, deal with it appropriately if they're not-- this is probably the hardest part of the whole exercise-- and do the math. The part I'm having trouble with is how you arrive at

50 - 2 x 3 = 300

:(

topr8

11:30 am on Mar 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



lucy24, that's so funny!

cgoodman

2:27 pm on Mar 12, 2014 (gmt 0)

10+ Year Member



Thank you. That's what to me when sleep deprived. 144

Fotiman

4:01 pm on Mar 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



[codepen.io...]


( <input id="v1" type="text"> -
<input id="v2" type="text"> ) x
<input id="v3" type="text">
<input type="button" id="calculate" value="=">
<input id="result">


body {
padding: 1em;
}
input[type="text"]:focus {
background-color: #eee;
}


(function () {
var v1 = document.getElementById('v1'),
v2 = document.getElementById('v2'),
v3 = document.getElementById('v3'),
calculate = document.getElementById('calculate'),
result = document.getElementById('result');
function validate(el) {
if (el.value.length == 0 ||
/\D/.test(el.value)) {
el.focus();
result.value = "Error in input";
return false;
}
return true;
}
calculate.onclick = function () {
if (validate(v1) && validate(v2) && validate(v3)) {
result.value = 0 + ((v1.value - v2.value) * v3.value);
}
};
})();

phranque

4:34 pm on Mar 12, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



welcome to WebmasterWorld, cgoodman!


the way Fotiman coded it - it's 144.

as written by the OP, PEMDAS kicks in and it's 300.

LifeinAsia

4:58 pm on Mar 12, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



PEMDAS kicks in and it's 300

What kinda math is that? :)

cgoodman

5:42 pm on Mar 12, 2014 (gmt 0)

10+ Year Member



That's the mind of math you end up with when you're burning the mid nite oil.

Thank you Mr Fotiman. New to JavaScript. Let me see if I can play with this a bit. Whenever you plan to visit The Bahamas, one nite for two is on me.

cgoodman

6:01 pm on Mar 12, 2014 (gmt 0)

10+ Year Member



Is thee a simpler way to code this so I can edit in Frontpage?

Fotiman

7:57 pm on Mar 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




the way Fotiman coded it - it's 144.

as written by the OP, PEMDAS kicks in and it's 300.

Actaully, no. PEMDAS would make the original answer:
50 - 2 x 3 = 50 - (2 x 3) = 50 - 6 = 44

I based the calculation on the latter post:
[webmasterworld.com...]

Which is why the HTML code shows parenthesis around the input fields. PEMDAS still applies, parenthesis have higher order of operations. :)

Thus instead of:
50 - 2 x 3
aka
50 - (2 x 3)
My answer is based on:
(50 - 2) x 3

Fotiman

7:59 pm on Mar 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




Is thee a simpler way to code this so I can edit in Frontpage?

Gah! Frontpage?! I didn't think anyone still used that. That hasn't had a release in 10 years! The best advice I could offer you would be to find a new editor. :)

brotherhood of LAN

8:14 pm on Mar 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



>PEMDAS

Or BODMAS, one of the things I remember well from school. I prefer to use brackets in case anyone else looks at the arithmetic.

phranque

5:50 am on Mar 13, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



That's the mind of math you end up with when you're burning the mid nite oil.

you go that right.
actually that's the "mind of math" you end up with when you get the math right and the arithmetic wrong.
(btw nobody else got 44 until i said PEMDAS)

in my defense, i still had enough in the tank to fix this problem.
http://www.webmasterworld.com/apache/4652333.htm?highlight=msg4653357 [webmasterworld.com]:
the problem is that line 239 contains the file name of the config file which is not a valid Apache directive

lucy24

10:33 am on Mar 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



That's a relief. Once in a blue moon, the Apache subforum requires someone who actually speaks Apache ;)

cgoodman

10:52 am on Mar 13, 2014 (gmt 0)

10+ Year Member



What I am trying to accomplish is a formula for determining potential heart or kidney failure using blood pressure readings and place that calculator on the web..
(Systolic reading - diastolic reading) x by a number given to hereditary and lifestyle factors to produce a probably for heart or kidney failure.
If your systolic reading is high like180, and your diastolic reading is 100 the difference being 80 would be multiplied by a number determined by hereditary and lifestyle factors. That number would be a decimal between -1 and 1. The result would be your probability for heart disease or kidney failure.

phranque

11:28 am on Mar 13, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



if my heart or a kidney depended on it i would go with Fotiman's code.

Fotiman

3:31 pm on Mar 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




Is thee a simpler way to code this so I can edit in Frontpage?

Note, I don't think there's anything complex about the example I gave that would prevent you from editing it in any editor. The content, presentation, and behavior has been split into the corresponding technology (HTML, CSS, and JavaScript). Knowing a little more about what you're doing, you could rename some of the fields like so:


( <input id="systolic" type="text"> -
<input id="diastolic" type="text"> ) x
<input id="hereditaryAndLifestyle" type="text">
<input type="button" id="calculate" value="=">
<input id="result">


(function () {
var systolic = document.getElementById('systolic'),
diastolic = document.getElementById('diastolic'),
hereditaryAndLifestyle = document.getElementById('hereditaryAndLifestyle'),
calculate = document.getElementById('calculate'),
result = document.getElementById('result');

// Verify that the input is numeric and not empty
function validate(el) {
if (el.value.length == 0 ||
/\D/.test(el.value)) {
el.focus();
result.value = "Error in input";
return false;
}
return true;
}

// Attach handler to the calculate button
calculate.onclick = function () {
if (validate(systolic) &&
validate(diastolic) &&
validate(hereditaryAndLifestyle)) {
// Calculate the risk as (systolic - diastolic) x hereditary & lifestyle risk
result.value = 0 + ((systolic.value - diastolic.value) * hereditaryAndLifestyle.value);
}
};
})();

Fotiman

3:42 pm on Mar 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




That number would be a decimal between -1 and 1

Just noticed that part. The validate method above is only looking for positive integer values, not decimal or negative values, so that will not work for you. You'd need a more complex regexp to handle decimals.

cgoodman

4:49 pm on Mar 13, 2014 (gmt 0)

10+ Year Member



I have some experience manipulating templates in Swish Max. You all are programmers. I notice your codding covers just about every platform. Once I get it to work I'll go from there. A friend suggested notepad++ all I am getting is ERROR. Fortunately I have all the time to get this. After a few tutorials I should get it.

Fotiman

5:13 pm on Mar 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Notepad++ is a great editor.
Feel free to ask questions. This can be a very helpful forum. :)

cgoodman

5:19 pm on Mar 13, 2014 (gmt 0)

10+ Year Member



Thanks. You will know in a few hours.

lucy24

9:09 pm on Mar 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



PEMDAS

Or BODMAS

These two unfamiliar forms percolated through my brain in the night, and when I woke up,
PEMA
presented itself for inspection. I guess the teachers trusted us to understand that M=D and A=S. (Still had to go look up B and O, though.)

LifeinAsia

9:49 pm on Mar 13, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Don't forget DUMBAS.

cgoodman

6:03 am on Mar 21, 2014 (gmt 0)

10+ Year Member



This is what I ended up with and it is not what I want.
How do I convert this to an applet that would run independently on a desk top out of all these shells?

[jsfiddle.net...]