I have been working with a javascript that will calculate BMI of a person. But with the BMI result, I want to display specific comments of specific result group. How can I do that?
Here is the script:
<script>
<!--
function calculateBmi()
{
var weight = document.bmiForm.weight.value
var height = document.bmiForm.height.value
if(weight > 0 && height > 0)
{
var stadnardwight1 = 19*height/100*height/100
document.bmiForm.weight1.value = stadnardwight1
var stadnardwight2 = 25*height/100*height/100
document.bmiForm.weight2.value = stadnardwight2
var finalBmi = weight/(height/100*height/100)
document.bmiForm.bmi.value = finalBmi
if(finalBmi < 19)
{
document.bmiForm.meaning.value = "That you are too thin."
}
if(finalBmi > 19 && finalBmi < 25)
{
document.bmiForm.meaning.value = "That you are healthy."
}
if(finalBmi > 25)
{
document.bmiForm.meaning.value = "That you have overweight."
}
}
else
{
alert("Please Fill in everything correctly")
}
}
//-->
</script>
<form name="bmiForm">
Your Weight(kg): <input type="text" name="weight" size="10"><br />
Your Height(cm): <input type="text" name="height" size="10"><br />
<input type="button" value="Calculate BMI" onClick="calculateBmi()"><br />
Your BMI: <input type="text" name="bmi" size="10"><br />
This Means: <input type="text" name="meaning" size="25"><br />
Your weight should be between: <input type="text" name="weight1" size="10"> to <input type="text" name="weight2" size="10"> kg<br />
<input type="reset" value="Reset" />
</form>
Here, meaning value is displayed by a text input from. But how can I display it as a paragraph, not as a text input?
Thanks in advance for helping.
Note: The meaning will change according to the 3 different categories of results.
It would be very helpful if you please give an example of line of code for the solution.
Instead of using an 'input' tag for meaning, use a 'span' tag, and set the innerHtml of that span to the content you want.
Related
How do I display something like a recommendation list after a user calculate a result from the inputs? E.g having the user to key in the salaries of the family and calculating the PCI (Per capita income) and after they key in and press on the calculate button which then will trigger a list of recommendations based on the amount of PCI the family have (Maybe tables that shows different results based on different categories of PCI?)
<!DOCTYPE html>
<html>
<head>
<script src="common.js"></script>
<script>
function cal()
{
var salary1 = document.getElementById('salary1').value;
var salary2 = document.getElementById('salary2').value;
var salary3 = document.getElementById('salary3').value;
var salary4 = document.getElementById('salary4').value;
var members = document.getElementById('members').value;
var total = (parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4)) / parseInt(members);
document.getElementById('total').value = total;
alert (total);
}
</script>
</head>
<body>
<h1>Want to know which bursary your eligible?</h1>
<input id="salary1" value="" placeholder="Enter your 1st family income..."/>
<input id="salary2" value="" placeholder="Enter your 2nd family income..."/>
<input id="salary3" value="" placeholder="Enter your 3rd family income..."/>
<input id="salary4" value="" placeholder="Enter your 4th family income..."/>
<input id="members" value="" placeholder="Enter the total number of family members..."/>
<br>
<button onclick="cal()"> Calculate PCI!</button>
<br>
Total: <input id="total"> </input>
</body>
</html>
You can create a hidden div that holds the data then show that div when user clicks the button
HTML:
<div id="divToShow" style="display:none;" class="table_list" >
//put your data table here
</div>
<input type="button" name="myButton" value="Show Div" onclick="showDiv()" />
Javascript:
function showDiv() {
document.getElementById('divToShow').style.display = "block";
}
This should get you there: Jsfiddle.
<form id="form">
<input id="number1" type="number" min="1" name="number" placholder="add value one"> +
<input id="number2" type="number" min="1" name="number" placholder="add value one">
<button>Submit</button>
</form>
var form = document.getElementById('form');
number1 = document.getElementById('number1');
number2 = document.getElementById('number2');
form.onsubmit = function() {
var total = +number1.value + +number2.value; // add + before
alert( total );
};
function cal(){
var salary1 = document.getElementById('salary1').value;
var salary2 = document.getElementById('salary2').value;
var salary3 = document.getElementById('salary3').value;
var salary4 = document.getElementById('salary4').value;
var members = document.getElementById('members').value;
var recommanted;
var recommandations=[
{maxpci:1000,recommandation:'first_recommandation'},
{maxpci:2000,recommandation:'second_recommandation'},
{maxpci:3000,recommandation:'third_recommandation'},
{maxpci:6000,recommandation:'fourth_recommandation'}
];
var total=(parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4)) / parseInt(members);
if(recommandations[recommandations.length - 1].maxpci < total ){recommanted=recommandations[recommandations.length - 1].recommandation;}
else{
for (var i = 0; i < recommandations.length; i++) {
if(total <= recommandations[i].maxpci){
recommanted=recommandations[i].recommandation;break;}
}}
document.getElementById('result').innerHTML = "Your PCI : "+total+"</br>Recommandation : "+recommanted;
}
<h1>Want to know which bursary your eligible?</h1>
<input id="salary1" type="number" value="" placeholder="Enter your 1st family income..."/>
<input id="salary2" type="number" value="" placeholder="Enter your 2nd family income..."/>
<input id="salary3" type="number" value="" placeholder="Enter your 3rd family income..."/>
<input id="salary4" type="number" value="" placeholder="Enter your 4th family income..."/>
<input id="members" type="number" value="" placeholder="Enter the total number of family members..."/>
</br>
<button onclick="cal()"> Calculate PCI!</button>
</br>
<div id="result">
</div>
The image above is a screenshot of a BMI calculator I'm working on at the moment.
The JavaScript code below is supposed to convert value supplied in the feet label (ftheight) box into inches and then add it up to value supplied into the Inches label (inheight) then multiply the result by 2.54 to convert it to centimeters(cm).
The BMI result given is wrong if for example, Weight is 75kg, Height is 5ft 9", BMI result shows 0.31 instead of 24.42. But when I changed the value for feet to 0 or blank and value for inches to 69, it gave the correct result of 24.42
HTML
<form name="bmiForm">
Your Weight(kg): <br><br>
<input type="text" name="weight" size="10"><br />
Your Height: <br><br>
Feet: <input type="number" name="ftheight" size="10">
Inches: <input type="number" name="inheight" size="10"><br />
<input type="button" value="Calculate BMI" onClick="calculateBmi()"><br /><br />
Your BMI: <br><input class="bmiresult" name="bmi" size="10"><br />
This Means: <br><input class="bmimean" name="meaning" size="25"><br />
<input type="reset" value="Reset" /> </form>
JAVASCRIPT
function calculateBmi() {
var weight = document.bmiForm.weight.value
var result = 2.54 * (document.bmiForm.ftheight.value * 12 + document.bmiForm.inheight.value)
var height = result
if(weight > 0 && height > 0){
var finalBmi = weight/(height/100*height/100)
document.bmiForm.bmi.value = finalBmi
if(finalBmi < 18.5){
document.bmiForm.meaning.value = "Hmm... you are too thin."
}
if(finalBmi > 18.5 && finalBmi < 25){
document.bmiForm.meaning.value = "Yah! you are healthy."
}
if(finalBmi > 25){
document.bmiForm.meaning.value = "Oops... you are overweight."
}
}
else{
alert("Please Fill in everything correctly")
}
}
What I want is to first convert value supplied into the feet box into inches and add it up to the value supplied in the Inches box and multiply the result by 2.54 to give me value for var height
I changed the weight input to type number (to keep it consistent with other inputs), and then called parseFloat on the input values (as input values are usually stored as text by default, not numbers).
You could change this to be parseInt for ft and inch values if you want to restrict the values to integers though.
If you find that the output is "ugly", you can constrain the number of decimals you show in the result by using toFixed as well.
function calculateBmi() {
var weight = parseFloat(document.bmiForm.weight.value);
var ftHeight = parseFloat(document.bmiForm.ftheight.value);
var inHeight = parseFloat(document.bmiForm.inheight.value);
var height = 2.54 * (ftHeight * 12 + inHeight);
if(weight > 0 && height > 0){
var finalBmi = weight / (height / 100 * height / 100)
document.bmiForm.bmi.value = finalBmi
if(finalBmi < 18.5){
document.bmiForm.meaning.value = "Hmm... you are too thin."
} else if(finalBmi > 18.5 && finalBmi < 25){
document.bmiForm.meaning.value = "Yah! you are healthy."
} else if(finalBmi > 25){
document.bmiForm.meaning.value = "Oops... you are overweight."
}
} else{
alert("Please Fill in everything correctly")
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form name="bmiForm">
Your Weight(kg): <br><br>
<input type="number" name="weight" size="10"><br />
Your Height: <br><br>
Feet: <input type="number" name="ftheight" size="10">
Inches: <input type="number" name="inheight" size="10"><br />
<input type="button" value="Calculate BMI" onClick="calculateBmi()"><br /><br />
Your BMI: <br><input class="bmiresult" name="bmi" size="10"><br />
This Means: <br><input class="bmimean" name="meaning" size="25"><br />
<input type="reset" value="Reset" />
</form>
</body>
</html>
I'm not sure what you're doing wrong, but this worked for me https://jsfiddle.net/vxshwk2w/
Try using id instead of name.
When I run my javascript code in html it's fine, but when I run the same code on localhost it shows me this message in the console:
Uncaught TypeError: Cannot read property 'style' of null
This is my code
<form method="post">
<ul id="edit">
<li>
<input type="text" name="adress" id="adress" placeholder="Adresa" />
</li>
<li>
<input type="text" name="city" id="city" placeholder="Grad" />
</li>
<li>
<input type="number" name="zip" id="zip" placeholder="Poštanski broj" />
</li>
<li>
<input type="tel" name="phone_number" id="phone_number" placeholder="Tel. broj" />
</li>
<li>
<input type="password" name="password" id="password" placeholder="Lozinka" />
<div class="password_strength" id="password_strength"></div>
</li>
<li>
<input type="password" name="repassword" id="repassword" placeholder="Ponoviti lozinku" onkeyup="checkPass(); return false;" />
</li><div id="confirmMessage"></div>
<br>
<li>
<input type="submit" name="submit" id="submit" value="Izmjeni" />
</li>
<br>
</ul>
</form>
<script>
function checkPass() {
var password = document.getElementById('password');
var repassword = document.getElementById('repassword');
var message = document.getElementById('confirmMessage');
var goodColor = "#66cc66";
var badColor = "#ff6666";
if (password.value == repassword.value) {
repassword.style.backgroundColor = goodColor;
message.style.color = goodColor;
message.innerHTML = "Passwords Match!"
} else {
repassword.style.backgroundColor = badColor;
message.style.color = badColor;
message.innerHTML = "Passwords Do Not Match!";
}
}
$('#password, #username').keydown(function (e) {
if (e.which == 32) {
return false;
}
});
$('#password').keyup(function () {
var PasswordLength = $(this).val().length;
var PasswordStrength = $('#password_strength');
if (PasswordLength <= 0) {
PasswordStrength.html('');
PasswordStrength.removeClass('normal weak strong verystrong');
}
if (PasswordLength > 0 && PasswordLength < 4) {
PasswordStrength.html('weak');
PasswordStrength.removeClass('normal strong verystrong').addClass('weak');
}
if (PasswordLength > 4 && PasswordLength < 8) {
PasswordStrength.html('Normal');
PasswordStrength.removeClass('weak strong verystrong').addClass('normal');
}
if (PasswordLength >= 8 && PasswordLength < 12) {
PasswordStrength.html('Strong');
PasswordStrength.removeClass('weak normal verystrong').addClass('strong');
}
if (PasswordLength >= 12) {
PasswordStrength.html('Very Strong');
PasswordStrength.removeClass('weak normal strong').addClass('verystrong');
}
});
</script>
First part of the code should add color to my input box for repeaedt password in green if password match or red if they don't, but it is always red.
Second part should add a class for password strength, but nothing.
First you should have a line number associated with your error code if you used the console. Second I noticed that there is a line that ends with no semi-colon
message.innerHTML = "Passwords Match!"
which is not an automatic error, but you want to eliminate possible misinterpretation by your browser.
Problem solved,
I made mistake in part of code what I didn't post in my question.
I had two same password ids.
So I had to replace:
<form action="login.php">
E-mail: <input type="mail" name="mail" id="mail"/><br><br>
Lozinka: <input type="password" name="login_password" id="login_password"/><br><br>
<input type="submit" value="Prijavi se"/><br><br>
Zaboravljena lozinka?
</form>
With:
<form action="login.php">
E-mail: <input type="mail" name="mail" id="mail"/><br><br>
Lozinka: <input type="password" name="login_password" id="login_password"/><br><br>
<input type="submit" value="Prijavi se"/><br><br>
Zaboravljena lozinka?
</form>
Thank you all for help :)
So basically, I am creating an application form for gym membership.
The base cost is $100. If juggling is selected, the cost will increase by $50.
Also, the base cost will increase by $50 if the 'BMI' is > 25 and <= 30. If the 'BMI' is > 30, it will increase by $100 instead.
This is my code. It is not working as intended. Would like some help. Thanks a lot.
<!DOCTYPE html>
<html>
<head>
<title>UWS application form</title>
<link rel="stylesheet" href="Prac1Task2.css" />
</head>
<body>
<form>
<fieldset>
<legend>Fitness Details</legend>
Favourite Activities: <br/>
<input type="checkbox" name="activity" value="cycling" id="cycling"><label for="cycling">Cycling</label>
<input type="checkbox" name="activity" value="50" id="juggling" onchange="update(this);"><label for="juggling">Juggling</label>
<br/>
<br/>
<label for="height">What is your height (Meters)</label><br/>
<input type="number" name="height" id="height" class="input" onchange="getBMI()">
<br/>
<label for="weight">What is your weight? (kg)</label><br/>
<input type="number" name="weight" id="weight" class="input" onchange="getBMI()">
<br/>
<label for="bmi">BMI:</label><br/>
<input type="number" name="bmi" id="bmi" class="input" value="" readonly>
<script>
function getBMI()
{
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
document.getElementById("bmi").value = (weight / height) / height;
var bmi = document.getElementById("bmi");
var price = document.getElementById("price").value;
if (bmi.value > 25 && bmi.value <= 30)
{
parseInt(price.value) += parseInt(50);
document.getElementById('price').value = price.value;
}
else if (bmi.value > 30)
{
document.getElementById("price").value = document.getElementById("price").value + 100;
}
}
</script>
</fieldset>
<br/>
<fieldset>
<legend>Application Details</legend>
Date of Application:<br/>
<input class="input" id="date" name="date" readonly />
<script>
var timetime = new Date();
document.getElementById("date").value = (timetime.getDate() + "/" + (timetime.getMonth() + 1)
+ "/" + timetime.getFullYear());
</script>
<br/><br/>
Cost of Application: <br/>
$<input type="number" class="input" id="price" name="price" step="0.01" value="100" readonly />
<script>
var total = 100;
function update(feature) {
if(feature.checked == true){
total += parseInt(feature.value);
document.getElementById('price').value = total;
}
if(feature.checked == false){
total -= parseInt(feature.value);
document.getElementById('price').value = total;
}
}
</script>
</fieldset>
<br/>
<input type="submit" value="Submit" class="button">
</form>
</body>
</html>
You haven't mentioned the exact issue which you are facing. However, I think there should be some problem with this line of code.
parseInt(price.value) += parseInt(50);
parseInt() is a function and you cannot assign values to it.
It should be some thing like this
price.value = parseInt(price.value) + parseInt(50);
Also price.value is not a proper reference because you are assigning document.getElementById("price").value; to it. So you should be using price instead of price.value
I have a form that I need to figure out the code on how to make sure a radio button is selected
Here is the form
<body>
<div id="content">
<p>Enter the values below and click "Calculate".</p>
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="answer">Answer:</label>
<input type="text" id="Answer" disabled="disabled" /><br />
<input type="radio" name="Area" value="Area" check="checked"/>Area<br />
<input type="radio" name="Parimeter" value="Parimeter" />Parimeter<br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</body>
</html>
here is the code
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var length = parseFloat( $("length").value );
var width = parseFloat( $("width").value );
// $("area").value = "";
if (isNaN(length) || length <= 0) {
alert("Length must be a valid number\nand greater than zero.");
} else if(isNaN(width) || width <= 0) {
alert("Width must be a valid number\nand greater than zero.");
}
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area.toFixed(2);
$("perimeter").value = perimeter.toFixed(2);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
Here are some links that may help you finish your homework:
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/jquery/default.asp
http://jsfiddle.net