PDA

View Full Version : Javascript specific calculator

Penny85
07-24-2011, 07:27 PM
Hello everyone, wondering if I could get some help. I have not done anything with html and javascript until this afternoon and funnily enough I'm struggling a tad :rolleyes: :o
I am creating a free website about the dangers of chocolate for dogs. Basically I need a calculator to calculate the toxic amount for the user input of their dogs weight in kgs. I figured doing one for each type of chocolate would be easier than doing something where a box was ticked for each type of chocolate so have been trying to do one for milk chocolate first.
This is my feeble attempt, it looks good but doesnt work, my javascript is clearly majorly wrong somewhere! :o
<html>
<head>
<script language="JavaScript">

function calc(form)
{
var f = parseFloat(form.kg.value);
var T = 0;
T = (f/0.45)*28.35;
form.answer.value = T;
}
// done hiding from old browsers -->
</script>
</head>
<body>
<FORM>
<h2>Toxic dose of milk chocolate</h2>
Enter dogs weight in kg:
<INPUT NAME="kg" VALUE="0" MAXLENGTH="100" SIZE=25>
<p>
Click to calculate toxic dose in grammes:
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON
onClick=kg(this.form)>
<p>
Toxic amount of milk chocolate is:
<INPUT NAME="g" READONLY SIZE=25>
</FORM>
</body>
</html>
Can anybody help?
Thanks in advance. :)

Philip M
07-24-2011, 07:45 PM
Here you are:-

<html>
<head>
<script type = "text/javascript">
function calc(form){
var f = parseFloat(form.kg.value);
if (isNaN(f) || (f < 0)) {
alert ("Invalid entry! Weight value must be a positive number!");
form.kg.value = "";
return false;
}
var T = 0;
T = (f/0.45)*28.35;
T = T.toFixed(2); // 2 decimal places
form.answer.value = T + " grams";
}
</script>
</head>
<body>
<form>
<h2>Toxic dose of milk chocolate</h2>
Enter dog's weight in kg:
<input type = "text" name = "kg" value="" size = "6">
<p>
Click to calculate toxic dose in grammes:
<input type = "button" value="Calculate" onClick="calc(this.form)">
<p>
Toxic amount of milk chocolate is:
<input type = "text" name ="answer" size = "12" readonly>
</form>
</body>
</html>

If there are several different types of chocolate involved, suggest you use a select list for the user to choose.

Quizmaster: In vocabulary, what 'O' is a word that specifically refers to a person between 80 and 89 years of age?
Contestant: Old.

Penny85
07-24-2011, 07:49 PM
Thank you thank you thank you :D Very much appreaciated! :)

Philip M
07-24-2011, 07:57 PM
It occurs to me that you ought to make it clear to the user that the calculated toxic amount is what it says - the toxic amount. Amounts less than this are still very undesirable. In other words, if the toxic amount is 200 grms then it is not OK to give the dog 199 grms! Severe symptoms of theobromine poisoning may be evident at much lower doses. Simple rule - do not give any chocolate to your dog. Once dogs have tasted chocolate, they want more.

Penny85
07-24-2011, 08:15 PM
very true, I will make that clear.
I have now stumbled upon another problem, sorry! I have altered the formula for each type of chocolate and put 3 calculators on the page, all three are returning the same value!? :confused: One value is correct the others aren't and I'm confused beyond belief! the page and calculators are here http://dogsandchocolate.weebly.com/calculators.html the bottom calculator is returning the correct result, the other two have correct values but are returning the same answer as the bottom one?!

Philip M
07-24-2011, 08:38 PM
You may not have two or more scripts with duplicate function and/or variable names on the same page. The last one will overwrite the previous ones. So all your onclick event handlers call the same script. If you owned three dogs you would not give them all the same name and expect the right one to come when you called!

You must rename all the functions and variables to (say) calc1(), calc2(), calc3(), f1, f2, f3 and so on. Likewise the names of the HTML elements.

But as I say, it would be better if the user selected the type of chocolate from a drop-down select list, and you passed the value selected to a single calculation script.

Penny85
07-24-2011, 08:45 PM
I was intending to do that in the first place (the drop down list) but thought it would be too complicated. Ok, thank you again, I shall try again later, I understand what you are saying...I think :D What a task to decide upon for a sunday :rolleyes: nothing like a challenge! :)

Actually this is clearly more complex as I'm not getting it right still! How do I do a list with dropdowns or is that going to take a year to explain?

Philip M
07-24-2011, 09:03 PM
This should give you something to work with. Note that two values are passed, the name of the type of chocolate and the relevant value used in your calculations. These are separated by a ~ (tilde) and then split out into an array. So then both parts are available to you. Obviously you can add further options.

<form>
<select name = "chocType" onchange = "getChocType()">
<option value = "">Select a type of chocolate....</option>
<option value = "milk~0.45">Milk Chocolate</option>
<option value = "bittersweet~1.45">Bittersweet Chocolate</option>
<option value = "dark~4.05">Dark Chocolate</option>
</select>
</form>

<script type = "text/javascript">
function getChocType() {
var tp = document.forms[0].chocType.value; // the value of the selected option
if (tp != "") {
var type = tp.split("~"); // split the two parts into an array
alert ("You selected " + type[0] + " chocolate which has a calculation value of " + type[1]);
}
}
</script>

Penny85
07-24-2011, 10:30 PM
:o I'm sure that would be so amazingly helpful to someone with more brains than me that hadnt been using html and javascript for about 6 hours :o I hate to be a pain I'm sorry but I'm struggling still, where do I need to put in the formula for the calculations? thats great I have the drop down box in it now thank you but I'm not sure of how to make it calculate the relevent options.

Philip M
07-25-2011, 09:43 AM
Here you are (suggest you check that the calculations for each type of chocolate are correct.) You can add further options as required.

<html>
<head>
<script type = "text/javascript">
function calc(form){
var f = parseFloat(form.kg.value);
if (isNaN(f) || (f < 0) || f > 40) {
alert ("Invalid entry! Weight value must be a positive number maximum 40 kgs!");
form.kg.value = "";
return false;
}
var tp = form.chocType.value; // the value of the selected option
if (tp != "") { // if a selection has been made
var ctype = tp.split("~"); // split the two parts into an array
//alert ("You selected " + ctype[0] + " chocolate which has a calculation value of " + ctype[1]); // for testing
var T = 0;
var Tx = ctype[1];
T = f/Tx*28.35;
T = Math.round(T); // whole number as extreme accuracy not required
form.answer.value = T + " grams of " + ctype[0] + " chocolate";
}
else {
alert ("Please select a chocolate type!");
return false;
}
}
</script>
</head>

<body>
<form>
<h2>Toxic dose of chocolate for a dog</h2>
<h3 style="color:#ff0000;">But never give your dog any chocolate at all - it is poisonous</h3>
Enter dog's weight in kg:
<input type = "text" name = "kg" value="" size = "6">
<p>
<br>
<select name = "chocType" >
<option value = "">Select a type of chocolate....</option>
<option value = "milk~0.45">Milk Chocolate</option>
<option value = "bittersweet~1.45">Bittersweet Chocolate</option>
<option value = "dark~4.05">Dark Chocolate</option>
</select>
<br><br><br>
Click to calculate toxic dose in grams:
<input type = "button" value="Calculate" onclick="calc(this.form)">
<br><br>
Toxic amount of chocolate is:
<input type = "text" name ="answer" size = "40" readonly>
</form>
</body>
</html>

Penny85
07-25-2011, 10:23 AM
:D :D :D Thank you so so much, I spent all evening trying to do that! You are a genious, I promise never to grace your lovely forum with such imbecile like questions again! :)

Philip M
07-25-2011, 11:06 AM
:D :D :D Thank you so so much, I spent all evening trying to do that! You are a genious, I promise never to grace your lovely forum with such imbecile like questions again! :)
It is often said that there are no silly questions - only stupid answers, although after many years involved with this forum I would not go quite as far as that. :) But sensible questions are always welcomed - that is what the forum is for.