I have been really stuck on this. I tried looking everywhere and I couldn't find my answer. I am trying to make my checkbox and radio to display the box that is checked off, but it must show the selected answer when displayed on alert. Can someone please help me figure this out?
function popUp(){
var firstName= document.getElementById("name").value;
var lastName = document.getElementById("last").value;
var age = document.getElementById("age").value;
var male = document.getElementById("male").checked;
var female = document.getElementById("female").checked ;
var female = document.getElementById("female").checked ;
var location = document.getElementById("location").checked;
var first = document.getElementById("first").checked;
var second = document.getElementById("second").checked;
var res = document.getElementById("res").checked;
var a = document.getElementById("a").checked;
var b = document.getElementById("b").checked;
return alert("First name:" + firstName + "\n" + "Last name:" + lastName + "\n" + "Age:" + age + "\n" + "Gender:" + male + female + "\n" + "Location:" + location + first + second + "\n" + "Dietary restrictions:" + res + a + b )
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="input.css">
</head>
<body>
<form id="new">
<label>First name:</label>
<input id="name" type="text">
<br>
<label>Last name:</label>
<input id="last" type="text">
<br>
<label>Age:</label>
<input id="age" type="text">
<br>
<label>Gender:</label>
<input type="radio" id="male" name="Male" >
<label for="male">Male</label>
<input type="radio" id="female" name="gender" >
<label for="female">Female</label>
<br>
<label>Location:</label>
<input id="location" type="checkbox" >
<label for="location">Miami</label>
<input id="first" type="checkbox" >
<label for="location">New York</label>
<input id="second" type="checkbox">
<label for="location">Houston</label>
<br>
<label>Dietary restrictions:</label>
<input id="res" type="checkbox">
<label for="Dietary restrictions">Lactose free</label>
<input id="a" type="checkbox" >
<label for="Dietary restrictions">Kosher</label>
<input id="b" type="checkbox">
<label for="Dietary restrictions">Vegetarian</label>
<br>
<button onclick= "popUp()" >OK</button>
</form>
<script src="input.js"></script>
</body>
</html>To display the value of radio button / checkbox, you can use querySelector(. . .).value for radio button and querySelectorAll(. . .) for checkbox. But you need to add value property in <input /> first. For each field you also need to specify the name.
function popUp(e){
e.preventDefault();
var firstName= document.getElementById("name").value;
var lastName = document.getElementById("last").value;
var age = document.getElementById("age").value;
var gender = document.querySelector('input[name="gender"]:checked').value;
var location = [...document.querySelectorAll('input[name="location"]:checked')].map(e => e.value);
var res = [...document.querySelectorAll('input[name="res"]:checked')].map(e => e.value);
return alert("First name:" + firstName + "\n" + "Last name:" + lastName + "\n" + "Age:" + age + "\n" + "Gender:" + gender + "\n" + "Location:" + location + "\n" + "Dietary restrictions:" + res )
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="input.css">
</head>
<body>
<form id="new">
<label>First name:</label>
<input id="name" type="text">
<br>
<label>Last name:</label>
<input id="last" type="text">
<br>
<label>Age:</label>
<input id="age" type="text">
<br>
<label>Gender:</label>
<input type="radio" value="Male" name="gender" >
<label for="gender">Male</label>
<input type="radio" value="Female" name="gender" >
<label for="gender">Female</label>
<br>
<label>Location:</label>
<input name="location" value="Miami" type="checkbox" >
<label for="location">Miami</label>
<input name="location" value="New York" type="checkbox" >
<label for="location">New York</label>
<input name="location" value="Houston" type="checkbox">
<label for="location">Houston</label>
<br>
<label>Dietary restrictions:</label>
<input name="res" type="checkbox" value="Lactose free">
<label for="Dietary restrictions">Lactose free</label>
<input name="res" value="Kosher" type="checkbox" >
<label for="Dietary restrictions">Kosher</label>
<input name="res" value="Vegetarian" type="checkbox">
<label for="Dietary restrictions">Vegetarian</label>
<br>
<button onclick= "popUp(event)" >OK</button>
</form>
<script src="input.js"></script>
</body>
</html>