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>
Related
I want to calculate this formula (PD)/(2SMYSDFT*E) but when I click calculate Botton nothing happens (ps: I am not an expert )
I put the input and then I click calculate put no answer.
I made some changes on the code but still not working . please can someone edit the code!
<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=</label>
<input type="number" id="P" name="P">
<br>
<label for="D=">Do=</label>
<input type="number" id="D" name="D" >
<br>
<label for="SMYS">SMYS=</label>
<input type="number" id="SMYS" name="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF" name="SMYS">
<br>
<label for="T">T=</label>
<input type="number" id="T" name="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E" name="E ⅉ=" >
<br>
<button type="button" onclick="calculate">calculate</button>
<p id="demo"></p>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var amount = document.getElementById("P").value;
var amount = +P;
var quantity = document.getElementById("D").value;
var quantity = +D;
var amount = document.getElementById("SMYS").value;
var amount = +SMYS;
var amount = document.getElementById("DF").value;
var amount = +DF;
var amount = document.getElementById("T").value;
var amount = +T;
var amount = document.getElementById("E").value;
var amount = +E;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
});
</script>
</head>
</body>
</html>
</form>
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>
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.
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>
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