So i'm trying to store my radio button values to my variable but it does not seem to pass through. And when i use checked It only displays that value and doesn't dynamically change.
I'm just trying to make a BMR calculator so i'm just making sure i am able to store values. I would prefer if i don't have to use JQuery if possible, thank you.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 50%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Metric {
background-color: royalblue;
}
#Imperial {
background-color: mediumseagreen;
}
</style>
</head>
<body>
<button onclick="openPage('Metric', this, 'royalblue')" id="defaultOpen">Metric BMR Calculator</button>
<button onclick="openPage('Imperial', this, 'mediumseagreen')" id="defaultOpen">Imperial BMR Calculator</button>
<div id="Metric" >
<form><br>
<label>Sex </label>
<select id="sex">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br><br>
Age: <input type="text" id="Age" /><br><br>
Your Height: <br>
Feet: <input type="text" id="Feet" />
Inches: <input type="text" id="Inches" /><br><br>
Your Weight: <br>
Stones: <input type="text" id="Stones" /> Pounds: <input type="text" id="Pounds"><br><br>
<input type="radio" id="id1" name="fit" value="30" >
<label for="id1" >I am sedentary (little or no excercise)</label><br>
<input type="radio" id="id2"name="fit" value="60" >
<label for="id2" >I am lightly active (light excercise or sports 1-3 days per week)</label><br>
<input type="radio" id="id3" name="fit" value="100">
<label for="id3">I am moderately active (moderate excercise or sports 3-5 days per week)</label><br>
<input type="radio" id="id4" name="fit" value="120">
<label for="id4">I am very active (hard excercise or sports 6-7 days per week</label><br>
<input type="radio" id="id5" name="fit" value="140">
<label for="id5">I am super active (very hard excercise or sports and a physical job or 2x training)</label><br><br>
<input type="submit" value="Submit" onclick="metricCalculation()" /><br>
</form>
</div>
<div id="Imperial" >
<!--
<form><br>
<label>Sex </label>
<select id="sex">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br><br>
Age: <input type="text" id="Age" name="Age" /><br><br>
Your Height: <br>
Feet: <input type="text" id="Feet" name="Feet" />
Inches: <input type="text" id="Inches" name="Inches" /><br><br>
Your Weight: <br>
Stones: <input type="text" id="Stones" /> Pounds: <input type="text" id="Pounds"><br><br>
<input type="radio" id="age1" name="age" value="30" >
<label for="age1">I am sedentary (little or no excercise)</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">I am lightly active (light excercise or sports 1-3 days per week)</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">I am moderately active (moderate excercise or sports 3-5 days per week)</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">I am very active (hard excercise or sports 6-7 days per week</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">I am super active (very hard excercise or sports and a physical job or 2x training)</label><br><br>
<input type="submit" value="Submit" onclick="imperialCalculation()" /><br>
</form>
Test
-->
</div>
</body>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function metricCalculation() {
var theDiv = document.getElementById("Metric");
theDiv.innerHTML = ("test<br>");
var Age = document.getElementById("Age").value;
var Sex = document.getElementById("sex").value;
var Feet = document.getElementById("Feet").value;
var Inches = document.getElementById("Inches").value;
var Stones = document.getElementById("Stones").value;
var Pounds = document.getElementById("Pounds").value;
// var x = document.getElementById("test").value;
// var selectedOption = $("input:radio[name=fit].checked").val()
// var gender = document.querySelector('input[name = Fit]:checked').value;
var ele = document.getElementsByName('fit');
theDiv.innerHTML = ("Your age is " Age "<br>");
theDiv.innerHTML = ("Your Gender is " Sex "<br>" );
// theDiv.innerHTML = ("Testing " x "<br>")
theDiv.innerHTML = ("test<br>");
//
for(i = 0; i < ele.length; i ) {
if(ele[i].checked)
theDiv.innerHTML = "Gender: " ele[i].value;
}
theDiv.innerHTML = ("<br>");
// theDiv.innerHtml = ("Your fitness level " selectedOption "<br>");
}
function imperialCalculation() {
var Age = document.getElementById("Age").value;
var LastName = document.getElementById("LastName").value;
var Email = document.getElementById("Email").value;
var Sex = document.getElementById("sex").value;
document.getElementById("total").innerHTML("<h1>Data Received</h1><br>");
document.writeln("Form Completed<br><br>");
document.writeln("The first name you entered is <b>" FirstName "</b><br>");
document.writeln("The last name you entered is <b>" LastName "</b><br>");
document.writeln("The email address is <b>" Email "</b><br>");
document.writeln("Your sex is: " Sex)
document.getElementById('spanResult1').textContent = "hi";
document.getElementById('spanResult').textContent = "cool";
}
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i ) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i ) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
</script>
</html>
CodePudding user response：
document.querySelector('input[name="fit"]:checked').value;