Output from the radio button into JavaScript doesn't work - javascript

I am doing a simple online form to calculate BMR using Harris–Benedict equation with the imperial measurements. I don't know where the error is inside my code but right now only the Clear the form button works. I didn't post the entire HTML code for the webpage because it looks just like I want it and it's only the calculation that I am having the problem with.
<form>
<fieldset id="ImpCalcInfo">
<label for="ageinput">
Age
<input tabindex="1" type="text" id="ageinput" name="age" />
</label>
<label for="heightinput">
Height
<input tabindex="3" type="text" id="heightinput" name="heigh" />
</label>
<label for="weightinput">
Weight
<input tabindex="5" type="text" id="weightinput" name="weight" />
</label>
<label for="genderinput">
<input name="gender" tabindex="7" type="radio" id="maleinput" value="1" checked>Male
<input name="gender" tabindex="9" type="radio" id="femaleinput" value="0">Female
</label>
</fieldset>
<input tabindex="11" type="button" id="submit" value="Submit" />
<input tabindex="13" type="reset" value="Clear fields" />
</form>
function impCalc() {
var bmrIm = 0;
var ageIm = document.getElementById("ageinput").value;
var heightIm = document.getElementById("heightinput").value;
var weightIm = document.getElementById("weightinput").value;
var genderIm = document.getElementById("gender").value;
if (genderIm.value = "1") {
bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
}
else {
bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
}
(ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");
}
document.getElementById("button").addEventListener("submit", impCalc, false);


The radio button were not working because you were taking them as an ID but the id does not exist in the input. You have get them via getElementsByName()[0]
Also you event listener did not know where button is clicked so the button id is is unique and it will listen to that click only when you click submit.
Here is working demo: https://jsfiddle.net/usmanmunir/tjsnaz4w/10/
function impCalc() {
var bmrIm = 0;
var ageIm = document.getElementById("ageinput").value;
var heightIm = document.getElementById("heightinput").value;
var weightIm = document.getElementById("weightinput").value;
var genderIm = document.getElementsByName("gender")[0].value
if (genderIm.value == "1") {
bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
}
else {
bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
}
(ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");
}
var el = document.getElementById('submit');
el.addEventListener("click", impCalc, false);
HTML
<form>
<fieldset id="ImpCalcInfo">
<label for="ageinput">
Age
<input tabindex="1" type="text" id="ageinput" name="age" />
</label>
<label for="heightinput">
Height
<input tabindex="3" type="text" id="heightinput" name="heigh" />
</label>
<label for="weightinput">
Weight
<input tabindex="5" type="text" id="weightinput" name="weight" />
</label>
<label for="genderinput">
<input name="gender" tabindex="7" type="radio" id="gender" value="1" checked>Male
<input name="gender" tabindex="9" type="radio" id="gender" value="0">Female
</label>
</fieldset>
<input tabindex="11" type="button" id="submit" value="Submit" />
<input tabindex="13" type="reset" value="Clear fields" />
</form>
Hope this helps.

Related

check the Value for standard manufacturing thickness and display a massage if pass or not

I need to to enter a new value( the standard manufacturing thickness(SMT)) and divid it on /48 then check if the answer < 135 display (pass) if not display (Enter higher value) I tried if else statement but it doesn't work
and also I want to display the (the standard manufacturing thickness(SMT=)) text input side by side with the MAOP(psi)= text input.
<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>
<h2>Enter inputs</h2>
<label for="P">MAOP(psi)=</label>
<input type="number" id="P">
<br>
<label for="D=">Do(in)=</label>
<input type="number" id="D">
<br>
<label for="SMYS">SMYS(psi)=</label>
<input type="number" id="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF">
<br>
<label for="T">T=</label>
<input type="number" id="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E">
<br>
<button type="submit" id="calculate">calculate</button>
<br>
<label for="total">Wall Thickness(in)=</label>
<input type="number" id="total" readonly>
<br>
<label for="SMT">Standerd Manufacturing Thickness (in)=</label>
<input type="number" id="SMT">
<br>
<button type="submit" id="check">Check</button>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var P = +document.getElementById("P").value;
var D = +document.getElementById("D").value;
var SMYS = +document.getElementById("SMYS").value;
var DF = +document.getElementById("DF").value;
var T = +document.getElementById("T").value;
var E = +document.getElementById("E").value;
var SMT = +document.getElementById("SMT").value;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
var Check= (SMT / 48);
function myFunction() {
document.getElementById("Check").value = Check;
}
if (SMT / 48 < 135) {
console.log("pass");
} else {
console.log("enter higher value");
}
});
</script>
</body>

How to clear form when radio button is changed

I want to clear form when the radio button is changed. Example gender is male and I fill number in weight input only If I change gender, the form will be clear or when I fill number in all input and click calculate and then BMR show me If I change gender, the form will be clear too.
window.addEventListener("load", () => {
document.getElementById('calculate').addEventListener('click', toBmr);
});
const toBmr = () => {
const gender = document.querySelector('[name=gender]:checked').value;
let weight = +document.getElementById('weight').value;
let height = +document.getElementById('height').value;
let age = +document.getElementById('age').value;
if (weight && age && height) {
let result = (10 * weight) + (6.25 * height) - (5 * age)
result += gender === 'male' ? 5 : -161;
document.getElementById('result').innerHTML = result.toFixed(2);
document.getElementById('showResult').style.display = "block";
}
};
const clearForm = () => {
document.getElementById('do-form').reset();
document.getElementById('showResult').style.display = "none";
}
const changeGender = () => {
let form = toBmr();
let r = document.getElementById('showResult').style.display;
if (r == "block") {
form = document.querySelector('[name=gender]:checked').addEventListener('change', clearForm());
}
}
<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<div id="selectGender" onchange="changeGender()">
<p>Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p>
</div>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
<label>BMR = <span id="result"></span> calories/day</label>
</div>

use form.reset() and then check the button
clearForm = (el) => {
document.querySelector("#f1").reset(); // reset the form
el.checked = true; // since we passed the element into the function we can simply check it
}
<form id="f1">
<input type="text" name="t" /><br />
<input type="radio" id="b1" name="b" value="b1" onclick="clearForm(this)" />
<label for="b1">b1</label><br>
<input type="radio" id="b2" name="b" value="b2" onclick="clearForm(this)" />
<label for="b2">b2</label><br>
</form>

JavaScript/HTML: Why does the result not show?

I'm trouble when I click the Calculate button it doesn't show anything in field of the result. How can I solve this problem?
window.onload = function toBmr() {
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var result = document.getElementById('result');
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', toCalculate);
function toCalculate() {
if(gender.value && weight.value && height.value && age.value) {
if(gender.value === 1) {
result.value = 66.47 + (13.7 * weight.value) + (5.003 * height.value) - (6.755 * age.value);
return result.toFixed(2);
}
if(gender.value === 2) {
result.value = 655.1 + (9.563 * weight.value) + (1.85 * height.value) - (4.676 * age.value);
return result.toFixed(2);
}
}
if(!gender.value || !weight.value || !height.value || !age.value) {
result.value = " ";
}
};
};
<form name="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeyup="fieldCheck"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeyup="fieldCheck"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeyup="fieldCheck"></p>
<input type="submit" id="calculate" value="Calculate" alt="calculate" onclick="toCalculate()">
<input type="submit" id="clear" value="Clear" alt="clear"><br><br>
<label>BMR = <input id="result" type="text" name="result" size="15" maxlength="10" /> calories/day</label>
</form>
Any help will be awesome! Thanks!

You need to use button instead of <input type="submit> in your form so that the page does not refresh.
Your gender radio values are male and female and you are checking if they are 1 and 2 in your script.
result.toFixed is not a function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="index.js"></script>
</head>
<body>
<form name="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" alt="clear">Clear</button><br><br>
<label>BMR = <input id="result" type="text" name="result" size="15" maxlength="10" /> calories/day</label>
</body>
</html>
window.onload = function toBmr() {
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var result = document.getElementById('result');
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', toCalculate);
function toCalculate() {
if(gender.value && weight.value && height.value && age.value) {
if(gender.value == 'male') {
result.value = 66.47 + (13.7 * weight.value) + (5.003 * height.value) - (6.755 * age.value);
}
if(gender.value == 'female') {
result.value = 655.1 + (9.563 * weight.value) + (1.85 * height.value) - (4.676 * age.value);
}
}
if(!gender.value || !weight.value || !height.value || !age.value) {
result.value = " ";
}
};
};

BMI calculator displays NaN instead of value [duplicate]

This question already has answers here:
Javascript getElementsByName.value not working [duplicate]
(3 answers)
Closed 3 years ago.
I want to make my calculator... in this calculator you input your height, weight and gender after that click on button and my calculator, calculate you BMI.
function cal() {
var h = document.getElementsByName("height").value; //it's get my height
var w = document.getElementsByName("weight").value; //it's get my weight
var r = (w / (h * h)) * 10000; //it's calculate MBI
document.getElementById("calcu").innerHTML = r; //the answer shows under my form
alert(r);
}
<form>
<fieldset>
<legend>محاسبه BMI</legend>//it's calculate BMI قد (cm)<br>//it's height
<input type="number" name="height" placeholder="175" value="175"><br> وزن (kg)<br>//it's weight
<input type="number" name="weight" placeholder="75" value="73"><br> جنسیت
<br>//it's gender
<input type="radio" name="female" value="gender">زن//women
<input type="radio" name="male" value="gender">مرد//man<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
<p id="calcu"></p>
</fieldset>
</form>

You need to 1: Select only one element each time, and 2: Convert values to a number:
function cal() {
var h = parseInt(document.getElementsByName("height")[0].value);
var w = parseInt(document.getElementsByName("weight")[0].value);
var r = (w / (h * h)) * 10000; //it's calculate MBI
document.getElementById("calcu").innerHTML = r; //the answer shows under my form
alert(r);
}
<form>
<fieldset>
<legend>محاسبه BMI</legend>//it's calculate BMI قد (cm)<br>//it's height
<input type="number" name="height" placeholder="175" value="175"><br> وزن (kg)<br>//it's weight
<input type="number" name="weight" placeholder="75" value="73"><br> جنسیت
<br>//it's gender
<input type="radio" name="female" value="gender">زن//women
<input type="radio" name="male" value="gender">مرد//man<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
<p id="calcu"></p>
</fieldset>
</form>

document.getElementsByName returns a collection of elements and .value is undefined for that. You should access the first element of that using
document.getElementsByName("...")[0].value
And also convert it number using +
function cal(){
var h= +document.getElementsByName("height")[0].value;//it's get my height
var w= +document.getElementsByName("weight")[0].value;//it's get my weight
var r= (w/(h*h))*10000;//it's calculate MBI
document.getElementById("calcu").innerHTML=r;//the answer shows under my form
alert(r);
}
<form>
<fieldset>
<legend>محاسبه BMI</legend>//it's calculate BMI
قد (cm)<br>//it's height
<input type="number" name="height" placeholder="175" value="175"><br>
وزن (kg)<br>//it's weight
<input type="number" name="weight" placeholder="75" value="73"><br>
جنسیت<br>//it's gender
<input type="radio" name="female" value="gender">زن//women
<input type="radio" name="male" value="gender">مرد//man<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
<p id="calcu"></p>
</fieldset>
</form>

function cal(){
var h= document.getElementsByName("height")[0].value;
var w= document.getElementsByName("weight")[0].value;
var r= (w/(h*h))*10000;
document.getElementById("calcu").innerHTML=r;
alert(r);
}
<div class="sectionmenu">
<form>
<fieldset>
<legend>محاسبه BMI</legend>
قد (cm)<br>
<input type="number" name="height" placeholder="175" value="175"><br>
وزن (kg)<br>
<input type="number" name="weight" placeholder="75" value="73"><br>
جنسیت<br>
<input type="radio" name="female" value="gender">زن
<input type="radio" name="male" value="gender">مرد<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>
<p id="calcu"></p>
</fieldset>
</form>
</div>

Reading in radio button selections in JS

I am trying to get a popup window to display whatever was entered into the form. I have managed to get it display the Name that was entered into the form, but would also like it to display the rating given in the website (radio buttons) using only JavaScript and HTML.
<form>
<fieldset>
<legend><b>Details</b></legend>
<label>First Name </label><input id = "fname" type="text" autofocus="" placeholder="Enter first name" name = "fname"><br><br>
<label>Last Name </label><input type="text" placeholder="Enter last name"><br><br>
<label>Email </label><input type="email" placeholder="Enter valid email"> <button onclick="myFunction()">Help</button><br><br>
</fieldset>
<fieldset>
<legend><b>Rating</b></legend>
<label>Website Rating:</label>
<input type="radio" name="Rating" value="1">* (1 Star)
<input type="radio" name="Rating" value="2">* * (2 Star)
<input type="radio" name="Rating" value="3">* * * (3 Star)
<input type="radio" name="Rating" value="4">* * * * (4 Star)
<input type="radio" name="Rating" value="5">* * * * * (5 Star)<br>
</fieldset>
<fieldset>
<legend><b>Comments</b></legend>
<label>Comments on the website:</label>
<textarea name="feedback1" rows="8" cols="70"></textarea><br>
</fieldset>
<fieldset>
<legend><b>Updates</b></legend>
Do you want to receive updates via Email?<br>
<input type="checkbox" name="updateYes" value="Yes">Yes
<input type="checkbox" name="update" value="No" checked>No<br>
</fieldset>
<input type="reset" value="Reset">
<button onclick="myFunction2()" type = "submit">Submit</button>
</form>
<script>
function myFunction() {
alert("Please enter a valid Email adress into the 'Email' field");
}
function myFunction2() {
alert("Thank you for your feedback " + document.getElementById('fname').value + ", You have rated the website ");
}
</script>
</body>
</html>

You could use querySelector for this:
var value = document.querySelector('input[name=Rating]:checked').value;
alert("Thank you for your feedback " + value + ", You have rated the website ");
Example: http://jsfiddle.net/bvaughn/kaqqsrc1/
You could also use getElementsByName:
var value;
var radios = document.getElementsByName("Rating");
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked) value = radios[i].value;
}
Example: http://jsfiddle.net/bvaughn/1qqqtafu/

Get the selected radiobutton by looping over them:
function myFunction2() {
var checkedRadioButton, inputs, rating;
inputs = document.getElementsByName("Rating");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checkedRadioButton = inputs[i];
break;
}
}
if (checkedRadioButton) {
rating = checkedRadioButton.value;
}
alert("Thank you for your feedback " + document.getElementById('fname').value + ", You have rated the website " + rating);
}
https://jsfiddle.net/d5jo235p/

Categories