Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Javascript specific calculator

    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
    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!
    <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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Here you are:-

    Code:
    <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.
    Last edited by Philip M; 07-24-2011 at 06:49 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Penny85 (07-24-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you thank you thank you Very much appreaciated!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    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.
    Last edited by Philip M; 07-24-2011 at 07:03 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!? 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?!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Penny85 (07-24-2011)

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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 What a task to decide upon for a sunday 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?
    Last edited by Penny85; 07-24-2011 at 07:58 PM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    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.

    Code:
    <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>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Penny85 (07-24-2011)

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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 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.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Here you are (suggest you check that the calculations for each type of chocolate are correct.) You can add further options as required.

    Code:
    <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>
    Last edited by Philip M; 07-25-2011 at 09:06 AM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Penny85 (07-25-2011)

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Quote Originally Posted by Penny85 View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •