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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help Please - new at JavaScript

    I am a newbie to JavaScript. Below is a body mass index calculator that I need to add an alert if someone adds text into the inputs of height or weight. I can't work out how to do it. And help would be greatly aprreciated.

    <html>

    <head>

    <title>Body Mass Index (BMI) Calculator</title>
    <script language="JavaScript">
    //Variables Input

    <!--
    function calcBmi() {
    var weight = document.bmiForm.weight.value //Input of Weight

    var height = document.bmiForm.height.value //Input of Height


    //Calculation of BMI

    if(weight > 0 && height > 0){
    var finalbmi = weight/(height/100*height/100)
    document.bmiForm.finalbmi.value = finalbmi
    document.bmiForm.finalbmi.value = new Number(finalbmi).toFixed(2);

    }
    //Highlighted Decisions are made below

    if(finalbmi < 17.999){
    document.getElementById('tr1').style.backgroundColor="yellow";
    }
    else{
    document.getElementById('tr1').style.backgroundColor="white";
    }
    if(finalbmi > 18 && finalbmi < 19.999){
    document.getElementById('tr2').style.backgroundColor="yellow";
    }
    else{
    document.getElementById('tr2').style.backgroundColor="white";
    }
    if(finalbmi > 20 && finalbmi < 24.999){
    document.getElementById('tr3').style.backgroundColor="yellow";
    }
    else{
    document.getElementById('tr3').style.backgroundColor="white";
    }
    if(finalbmi > 25 && finalbmi < 29.999){
    document.getElementById('tr4').style.backgroundColor="yellow";
    }
    else{
    document.getElementById('tr4').style.backgroundColor="white";
    }
    if(finalbmi > 30){
    document.getElementById('tr5').style.backgroundColor="yellow";
    }
    else{
    document.getElementById('tr5').style.backgroundColor="white";
    }

    }

    </script>
    <style>
    .container {
    width: 100%;
    }
    .wrapper {
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    width: 600px;
    }
    table {
    width: 540px;
    margin: 0 auto;
    font-size: 100%;
    }
    form {
    text-align: center;
    }
    </style>
    </head>

    <body>
    <div class="container">
    <div class="wrapper">
    <form name="bmiForm">
    <h3> Body Mass Index (BMI) Calculator</h3>

    <p>
    Height(cm): <input type="text" name="height" size="11"><br />

    Weight(kg): <input type="text" name="weight" size="11"><br />

    <input type="button" value="Button" onClick="calcBmi()">
    </p><br/>

    <p>
    Your BMI is: <input type="text" name="finalbmi" size="11"><br />
    </p>


    <table id="bmitable" border="1" width="40%">
    <tr id='tr1'>
    <td>Under 18 - your are very underweight and possibly malnourished.</td>
    </tr>
    <tr id='tr2'>
    <td>Under 20 - you are underweight and could afford to gain a little weight.</td>
    </tr>
    <tr id='tr3'>
    <td>20 to 25 - you have a healthy weight range for a young and middle-aged adults.</td>
    </tr>
    <tr id='tr4'>
    <td>26 to 30 - you are overweight.</td>
    </tr>
    <tr id='tr5'>
    <td>Over 30 - you are obese</td>
    </tr>
    </table>
    </form>
    </div>
    <div>
    </body>

    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    You need to look at form validation and regex patterns. Plenty of examples online if you google.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    You also need to read the GD Sticky: HTML & CSS Posting Rules & Guidelines http://www.codingforums.com/html-css...uidelines.html Before posting:
    Please read them now.

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <form name="bmiForm">
    <h3> Body Mass Index (BMI) Calculator</h3>
    
    <p>
    Height(cm): <input type="text" name="height" size="11"><span id="height_error" style="color:red;"></span> <br />
    
    Weight(kg): <input type="text" name="weight" size="11"><span id="weight_error" style="color:red;"></span> <br />
    
    <input type="button" value="Button" onClick="calcBmi()">
    </p><br/>
    
    <p>
    Your BMI is: <input type="text" name="finalbmi" size="11"><br />
    </p>
    </form>
    
    <script>
    function calcBmi() {
    	var weight = document.bmiForm.weight.value //Input of Weight
    	if(isNaN(weight)) {document.getElementById('weight_error').innerHTML='Numbers only';}else{document.getElementById('weight_error').innerHTML='';}
    	var height = document.bmiForm.height.value //Input of Height
    	if(isNaN(height)) {document.getElementById('height_error').innerHTML='Numbers only';}else{document.getElementById('height_error').innerHTML='';}
    
    	if(weight > 0 && height > 0){
    		var finalbmi = weight/(height/100*height/100);
    		document.bmiForm.finalbmi.value = finalbmi;
    		document.bmiForm.finalbmi.value = new Number(finalbmi).toFixed(2);
    	}
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

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