Develop Reference

Uncaught TypeError: Cannot read property 'checked' of undefined, Checkboxes

I want to validate my checkboxes to make sure that the user checked at least one, however I keep getting this error:
Uncaught TypeError: Cannot read property 'checked' of undefined.
Here is part of the HTML:
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required): <input type="text" name="userName" id="userName" required=""><br> E-Mail (Required): <input type="text" name="mail" id="mail" required=""><br> Phone (Required): <input type="text" name="phone" id="phone" required="" onchange="validNumber()"><br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other <br>
<textarea></textarea><br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and part of the JavaScript for the checkboxes:
function validChoice()
{
var bookChoice = document.userSurvey.books.value;
var x= "";
for (i=0;i< 4;i++)
{
if (document.userSurvey['bookChoice'+i].checked)
{
bookChoice = document.userSurvey['bookChoice'+i].value;
x = x +"\n"+ bookChoice;
}
}
if (bookChoice == "")
{
window.alert("You must select at least one book category.");
return false;
}
else
{
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
return true;
}
}
I am currently learning in JavaScript therefore I would prefer help in JavaScript only.
Full Code on JSFiddle:
https://jsfiddle.net/7qh5segc/

You missed some tag names and missspell them in js function:
<h1>User Survey</h1>
<h2><strong>User Information</strong></h2>
<p>Please enter your details below</p>
<br>
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required):
<input type="text" name="userName" id="userName" required="">
<br> E-Mail (Required):
<input type="text" name="email" id="email" required="">
<br> Phone (Required):
<input type="text" name="phone" id="phone" required="" onchange="validNumber()">
<br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other
<br>
<textarea></textarea>
<br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and js code goes like this:
function validName() {
var name = document.userSurvey.userName.value;
if (!/^[a-zA-Z]*$/g.test(name)) {
alert("Please enter letters a - z only");
document.userSurvey.userName.focus();
return false;
} else {
return true;
}
}
function validNumber() {
var theNumbersOnly = "";
var theChar = "";
var theInput = document.userSurvey.phone.value;
for (i = 0; i < theInput.length; i++) {
theChar = theInput.substring(i, i + 1);
if (theChar >= "0" && theChar <= "9") {
theNumbersOnly = "" + theNumbersOnly + theChar;
}
}
if (theNumbersOnly.length < 10) {
alert("You must enter 10 numbers.");
document.userSurvey.phone.focus();
} else {
var areacode = theNumbersOnly.substring(0, 3);
var exchange = theNumbersOnly.substring(3, 6);
var extension = theNumbersOnly.substring(6, 10);
var newNumber = "(" + areacode + ") ";
newNumber += exchange + "-" + extension;
document.userSurvey.phone.value = newNumber;
return true;
}
}
function validEmail() {
var email = document.userSurvey.email.value;
var atLoc = email.indexOf("#", 1);
var dotLoc = email.indexOf(".", atLoc + 2);
var len = email.length;
if (atLoc > 0 && dotLoc > 0 && len > dotLoc + 2) {
return true;
} else {
alert("Please enter your e-mail address properly.");
return false;
}
}
function validChoice() {
//var bookChoice = document.userSurvey.books.value;
var bookChoice;
var x = "";
for (var i = 0; i < 4; i++) {
if (document.userSurvey.books[i].checked) {
console.log(document.userSurvey);
bookChoice = document.userSurvey.books[i].value;
x = x + "\n" + bookChoice;
}
}
if (bookChoice == "") {
window.alert("You must select at least one book category.");
return false;
} else {
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
console.log(userName);
console.log(eMail);
console.log(phoneNo);
return true;
}
}
function validAll() {
if ((validName() == true) && (validEmail() == true) && (validNumber() == true) && (validChoice() == true)) {
return true;
} else {
return false;
}
}
You missed email tag name too. regards

You can fix the checkbox issue using the following code. A sensible way to get all the checkboxes in this case is using their shared "name" attribute. There are other ways if your structure was different - e.g. using a CSS class, or adding some other custom attribute to the elements.
function validChoice() {
var bookChoices = "";
var checkboxes = document.getElementsByName("books"); //get all elements named "books" into an array
for (i = 0; i < checkboxes.length; i++) { //loop the array
if (checkboxes[i].checked) { //if the array item at this index is checked, then add it to the list
bookChoices += "\n" + checkboxes[i].value;
}
}
if (bookChoices == "") {
window.alert("You must select at least one book category.");
return false;
} else {
alert(bookChoices); //just for testing
return true;
}
}
See https://jsfiddle.net/7qh5segc/3/ for a demo using the changed validChoice() function.

JavaScript form script works Chrome but nowhere else

2nd update 9/6/2015
So here's what I came up with for a solution—it's certainly much shorter, and works in all my Mac browsers so I'm assuming it works elsewhere too. Is there a way to condense it further or should I leave it at this?
var myForm = document.form1;
var radioNames = [myForm.proSpeed, myForm.ram, myForm.storage, myForm.graphics, myForm.cursorControl];
var lastPrice = [0, 0, 0, 0, 0];
var total = 2299;
var result = document.getElementById('result');
result.innerHTML = "$" + total + ".00";
function getLastPrice(radios, lastPriceIndex) {
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
var price = parseInt(radios[index].value);
total = total + lastPrice[lastPriceIndex] + price;
result.innerHTML = "$" + total + ".00";
lastPrice[lastPriceIndex] = -price;
}
}
}
function getProPrice() {
getLastPrice(myForm.proSpeed, 0);
}
function getRamPrice() {
getLastPrice(myForm.ram, 1);
}
function getStoPrice() {
getLastPrice(myForm.storage, 2);
}
function getGraPrice() {
getLastPrice(myForm.graphics, 3);
}
function getCurPrice() {
getLastPrice(myForm.cursorControl, 4);
}
var priceFunctions = [getProPrice, getRamPrice, getStoPrice, getGraPrice, getCurPrice];
function addRadioListeners(radios, priceFunction) {
for (var index = 0; index < radios.length; index++) {
radios[index].addEventListener("change", priceFunction);
}
}
for (var index = 0; index < 5; index++) {
addRadioListeners(radioNames[index], priceFunctions[index]);
}
UPDATE 9/5/2015
#Barmar thanks again for all your help. I'm now combining the addPrice functions:
function addPrice(price, radios) {
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - price + parseInt(radios[index].value);
price = parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
break;
}
}
}
proPrice = addPrice(proPrice, myForm.proSpeed);
Just not sure what to do next to remove the other functions and keep the form working. In other words where does proPrice go and what do I put in the change eventListener now that addProPrice no longer exists? proPrice comes back as undefined.
Original Post
I'm working on a JavaScript exercise that had me create a build-your-own-computer store page, so I decided to just try to mimic a page from the Apple Store. Here's the page I'm trying to copy:
Retina 5k iMac
And here's my (very) bare-bones version: mock-up of iMac store page
My version works in Chrome, but not in Firefox or Safari. I have no idea what the problem is. Any thoughts?
(Below is the full code in case you don't want to follow the link)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Apple Store Sim</title>
</head>
<body>
<form action="" name="form1" id="form1">
<h1>iMac with Retina 5K display</h1>
<p>1. Choose Processor</p>
<p>
<input type="radio" name="proSpeed" checked="checked" value="0" />
<label>3.5GHz Quad-core Intel Core i5, Turbo Boost up to 3.9GHz</label><br />
<input type="radio" name="proSpeed" value="250" />
<label>4.0GHz Quad-core Intel Core i7, Turbo Boost up to 4.4GHz</label>
</p>
<p>2. Choose Memory</p>
<p>
<input type="radio" name="ram" checked="checked" value="0" />
<label>8GB 1600MHz DDR3 SDRAM - 2x4GB</label><br />
<input type="radio" name="ram" value="200" />
<label>16GB 1600MHz DDR3 SDRAM - 2x8GB</label><br />
<input type="radio" name="ram" value="600" />
<label>32GB 1600MHz DDR3 SDRAM - 4x8GB</label>
</p>
<p>3. Choose Storage</p>
<p>
<input type="radio" name="storage" checked="checked" value="0" />
<label>1TB Fusion Drive</label><br />
<input type="radio" name="storage" value="150" />
<label>3TB Fusion Drive</label><br />
<input type="radio" name="storage" value="0" />
<label>256GB Flash Storage</label><br />
<input type="radio" name="storage" value="300" />
<label>512GB Flash Storage</label><br />
<input type="radio" name="storage" value="800" />
<label>1TB Flash Storage</label>
</p>
<p>4. Choose Graphics</p>
<p>
<input type="radio" name="graphics" checked="checked" value="0" />
<label>AMD Radeon R9 M290X 2GB GDDR5</label><br />
<input type="radio" name="graphics" value="250" />
<label>AMD Radeon R9 M295X 4GB GDDR5</label>
</p>
<p>5. Choose Mouse and Magic Trackpad</p>
<p>
<input type="radio" name="cursorControl" checked="checked" value="0" />
<label>Apple Magic Mouse</label><br />
<input type="radio" name="cursorControl" value="0" />
<label>Magic Trackpad</label><br />
<input type="radio" name="cursorControl" value="0" />
<label>Apple Mouse</label><br />
<input type="radio" name="cursorControl" value="69" />
<label>Apple Magic Mouse + Magic Trackpad</label><br />
</p>
<p>6. Choose Apple Keyboard and Documentation</p>
<p>
<select name="keyboard" size="1">
<option value="0" selected="selected">Apple Wireless Keyboard (English) & User's Guide</option>
<option value="0">Apple Wireless Keyboard (Arabic) & User's Guide</option>
<option value="0">Apple Wireless Keyboard (British) & User's Guide</option>
</select>
</p>
</form>
<div id="result"></div>
<script src="appleStoreSim.js"></script>
</body>
</html>
Javascript:
var myForm = document.form1;
var proPrice = 0;
var ramPrice = 0;
var stoPrice = 0;
var graPrice = 0;
var curPrice = 0;
var total = 2299;
var result = document.getElementById('result');
result.innerHTML = "$" + total + ".00";
function addProPrice(radio) {
var radios = myForm.proSpeed;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - proPrice + parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
addProListener();
}
}
}
function addProListener(radio) {
var radios = myForm.proSpeed;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
radios[index].removeEventListener("click", addProPrice);
proPrice = radios[index].value;
} else {
radios[index].addEventListener("click", addProPrice)
}
}
}
for (var index = 0; index < myForm.proSpeed.length; index++) {
myForm.proSpeed[index].addEventListener("focus", addProListener);
}
function addMemPrice(radio) {
var radios = myForm.ram;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - ramPrice + parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
addMemListener();
}
}
}
function addMemListener(radio) {
var radios = myForm.ram;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
radios[index].removeEventListener("click", addMemPrice);
ramPrice = radios[index].value;
} else {
radios[index].addEventListener("click", addMemPrice)
}
}
}
for (var index = 0; index < myForm.ram.length; index++) {
myForm.ram[index].addEventListener("focus", addMemListener);
}
function addStoPrice(radio) {
var radios = myForm.storage;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - stoPrice + parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
addStoListener();
}
}
}
function addStoListener(radio) {
var radios = myForm.storage;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
radios[index].removeEventListener("click", addStoPrice);
stoPrice = radios[index].value;
} else {
radios[index].addEventListener("click", addStoPrice)
}
}
}
for (var index = 0; index < myForm.storage.length; index++) {
myForm.storage[index].addEventListener("focus", addStoListener);
}
function addGraPrice(radio) {
var radios = myForm.graphics;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - graPrice + parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
addGraListener();
}
}
}
function addGraListener(radio) {
var radios = myForm.graphics;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
radios[index].removeEventListener("click", addGraPrice);
graPrice = radios[index].value;
} else {
radios[index].addEventListener("click", addGraPrice)
}
}
}
for (var index = 0; index < myForm.graphics.length; index++) {
myForm.graphics[index].addEventListener("focus", addGraListener);
}
function addCurPrice(radio) {
var radios = myForm.cursorControl;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - curPrice + parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
addCurListener();
}
}
}
function addCurListener(radio) {
var radios = myForm.cursorControl;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
radios[index].removeEventListener("click", addCurPrice);
curPrice = radios[index].value;
} else {
radios[index].addEventListener("click", addCurPrice)
}
}
}
for (var index = 0; index < myForm.cursorControl.length; index++) {
myForm.cursorControl[index].addEventListener("focus", addCurListener);
}

Firefox on the Mac doesn't trigger the focus event when you click on a radio button. I haven't researched whether this is a standard violation, but there's a simpler way to do what you're doing. Instead of using the focus event to add a click handler, just use the change event. This will be triggered whenever you click on a radio button that wasn't already checked. This can be bound directly to the addXXXPrice functions.
BTW, all your addXXXPrice functions are declared with a radio parameter that they never use. The actual argument to an event handler is an event object, not the radio button; the target of the event will be in this.
And all those addXXXPrice functions are identical, except for the set of buttons they loop over and the xxxPrice variable they update. I suggest you pull that out into a single function that takes those things as parameters, so you can do:
proPrice = addPrice(proPrice, myForm.proSpeed);
Here's the revised version of your code:
var myForm = document.form1;
var proPrice = 0;
var ramPrice = 0;
var stoPrice = 0;
var graPrice = 0;
var curPrice = 0;
var total = 2299;
var result = document.getElementById('result');
result.innerHTML = "$" + total + ".00";
//total = parseFloat(total).toFixed(2);
console.log(result);
function addProPrice(radio) {
var radios = myForm.proSpeed;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - proPrice + parseInt(radios[index].value);
proPrice = parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
break;
}
}
}
for (var index = 0; index < myForm.proSpeed.length; index++) {
myForm.proSpeed[index].addEventListener("change", addProPrice);
}
function addMemPrice(radio) {
var radios = myForm.ram;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - ramPrice + parseInt(radios[index].value);
ramPrice = parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
break;
}
}
}
for (var index = 0; index < myForm.ram.length; index++) {
myForm.ram[index].addEventListener("change", addMemPrice);
}
function addStoPrice(radio) {
var radios = myForm.storage;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - stoPrice + parseInt(radios[index].value);
stoPrice = parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
break;
}
}
}
for (var index = 0; index < myForm.storage.length; index++) {
myForm.storage[index].addEventListener("change", addStoPrice);
}
function addGraPrice(radio) {
var radios = myForm.graphics;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - graPrice + parseInt(radios[index].value);
graPrice = parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
break;
}
}
}
for (var index = 0; index < myForm.graphics.length; index++) {
myForm.graphics[index].addEventListener("change", addGraPrice);
}
function addCurPrice(radio) {
var radios = myForm.cursorControl;
for (var index = 0; index < radios.length; index++) {
if (radios[index].checked) {
total = total - curPrice + parseInt(radios[index].value);
curPrice = parseInt(radios[index].value);
result.innerHTML = "$" + total + ".00";
break;
}
}
}
for (var index = 0; index < myForm.cursorControl.length; index++) {
myForm.cursorControl[index].addEventListener("change", addCurPrice);
}
<form action="" name="form1" id="form1">
<h1>iMac with Retina 5K display</h1>
<p>1. Choose Processor</p>
<p>
<input type="radio" name="proSpeed" checked="checked" value="0" />
<label>3.5GHz Quad-core Intel Core i5, Turbo Boost up to 3.9GHz</label>
<br />
<input type="radio" name="proSpeed" value="250" />
<label>4.0GHz Quad-core Intel Core i7, Turbo Boost up to 4.4GHz</label>
</p>
<p>2. Choose Memory</p>
<p>
<input type="radio" name="ram" checked="checked" value="0" />
<label>8GB 1600MHz DDR3 SDRAM - 2x4GB</label>
<br />
<input type="radio" name="ram" value="200" />
<label>16GB 1600MHz DDR3 SDRAM - 2x8GB</label>
<br />
<input type="radio" name="ram" value="600" />
<label>32GB 1600MHz DDR3 SDRAM - 4x8GB</label>
</p>
<p>3. Choose Storage</p>
<p>
<input type="radio" name="storage" checked="checked" value="0" />
<label>1TB Fusion Drive</label>
<br />
<input type="radio" name="storage" value="150" />
<label>3TB Fusion Drive</label>
<br />
<input type="radio" name="storage" value="0" />
<label>256GB Flash Storage</label>
<br />
<input type="radio" name="storage" value="300" />
<label>512GB Flash Storage</label>
<br />
<input type="radio" name="storage" value="800" />
<label>1TB Flash Storage</label>
</p>
<p>4. Choose Graphics</p>
<p>
<input type="radio" name="graphics" checked="checked" value="0" />
<label>AMD Radeon R9 M290X 2GB GDDR5</label>
<br />
<input type="radio" name="graphics" value="250" />
<label>AMD Radeon R9 M295X 4GB GDDR5</label>
</p>
<p>5. Choose Mouse and Magic Trackpad</p>
<p>
<input type="radio" name="cursorControl" checked="checked" value="0" />
<label>Apple Magic Mouse</label>
<br />
<input type="radio" name="cursorControl" value="0" />
<label>Magic Trackpad</label>
<br />
<input type="radio" name="cursorControl" value="0" />
<label>Apple Mouse</label>
<br />
<input type="radio" name="cursorControl" value="69" />
<label>Apple Magic Mouse + Magic Trackpad</label>
<br />
</p>
<p>6. Choose Apple Keyboard and Documentation</p>
<p>
<select name="keyboard" size="1">
<option value="0" selected="selected">Apple Wireless Keyboard (English) & User's Guide</option>
<option value="0">Apple Wireless Keyboard (Arabic) & User's Guide</option>
<option value="0">Apple Wireless Keyboard (British) & User's Guide</option>
</select>
</p>
</form>
<div id="result"></div>

How to get an input value dynamically and perform arithmetic operations using javascript

I have created two input text fields by which the user have to give two values. Using javascript, I need to get those values perform addition, subtraction, multiplication and division based on the checkbox checked. How to do that?
Here is my code..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS Assignment</title>
<script>
function changeCheckBox() {
try {
var max = document.myform.check.length;
var count = 0;
for (var i = 0; i < max; i++) {
if (document.myform.check[i].checked == true) {
count++;
serNoChecked = i;
}
}
if (count == 1) {
for (var i = 0; i < max; i++) {
if (document.myform.check[i].checked == false) {
document.myform.check[i].disabled = true;
}
}
} else if (count == 0) {
for (var i = 0; i < max; i++) {
document.myform.check[i].disabled = false;
}
}
if (null == max) return false;
if (count == 0) {
return true;
} else if (count > 0) {
return false;
}
} catch (e) {
alert(e.message);
}
}
</script>
<script type="text/javascript">
function arith()
{
var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;
x=num1 + num2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</head>
<body background="photo.jpg" onload="arith()">
<h3>Simple JavaScript Arithmetic Operations</h3>
<form name="myform" method="get">
Value 1 <input type ="text" id="num1"> <br><br>
Value 2 <input type="text" id="num2"> <br><br>
<input type="checkbox" name="check" value="check1" id="check1" onclick="changeCheckBox()">Addition<br>
<input type="checkbox" name="check" value="check2" id="check2" onclick="changeCheckBox()">Subtraction<br>
<input type="checkbox" name="check" value="check3" id="check3" onclick="changeCheckBox()">Multiplication<br>
<input type="checkbox" name="check" value="check4" id="check4" onclick="changeCheckBox()">Division<br><br>
<input type="submit" value="Submit">
</form>
<p id="demo"></p>
</body>
</html>

Try sending the value of the HTML into the function, and then use those as an if statement check (or switch statement).
<form name="myform" method="get">
Value 1 <input type ="text" id="num1"> <br><br>
Value 2 <input type="text" id="num2"> <br><br>
<input type="checkbox" name="check" id="check1">Addition<br>
<input type="checkbox" name="check" id="check2">Subtraction<br>
<input type="checkbox" name="check" id="check3">Multiplication <br>
<input type="checkbox" name="check" id="check4">Division<br><br>
<input type="submit" value="Submit">
<p id="demo"></p>
Notice the value attributes now have unique value. And you're sending that into the function as a parameter.
Now just have a function that returns what you want
var newVal = "Unset";
var plus = document.getElementById("check1");
var minus = document.getElementById("check2");
var times = document.getElementById("check3");
var divide = document.getElementById("check4");
var demoP=document.getElementById("demo");
plus.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1+n2;
demoP.innerHTML="x=" + newVal;
}
minus.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1-n2;
demoP.innerHTML="x=" + newVal;
}
times.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1*n2;
demoP.innerHTML="x=" + newVal;
}
divide.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1/n2;
demoP.innerHTML="x=" + newVal;
}

I want to check answer and display it on HTML page with Javascript

I am pretty new on Javascript coding. I'm creating a web page for surveys or testing by myself.
Now here is my code;
<form id="q1form">
<input type="radio" name="question1" value="1" id="q1"> true
<input type="radio" name="question1" value="0" id="q2"> false
</form>
<button onclick="myFunction()"> try </button>
function myFunction(){
var form = document.getElementById('q1form'),
s1 = form['question1'],
n;
for (n = 0; n < s1.length; n++) {
if (s1[n].checked) {
var soru1= parseInt(s1[n].value);
}
}
if(soru1==1){
document.writeln("Your answer is correct!");
}
else{
document.wirteln("Your answer is not correct");
}
}
In this code I want to display "Your answer is correct!" or other answer near the 'try' button. I can display answer with window.alert but I want to do it near button, in same page. Is it possible? How can I do it?

You could use a div next to the button <span id="feedback"></span> and then insert the feedback into that div:
var feedback = document.getElementById("feedback");
feedback.innerHTML = "Your answer is correct!";

Something like
<form id="q1form">
<input type="radio" name="question1" value="1" id="q1">true
<input type="radio" name="question1" value="0" id="q2">false
</form>
<button onclick="myFunction(this)">try</button>
<script>
function myFunction(btn) {
var form = document.getElementById('q1form'),
s1 = form['question1'],
p = document.createElement('p'),
txt,
n;
for (n = 0; n < s1.length; n++) {
if (s1[n].checked) {
var soru1 = parseInt(s1[n].value);
}
}
if (soru1 == 1) {
txt = "Your answer is correct!"
} else {
txt = "Your answer is not correct";
}
var oldP = document.getElementById('response');
if (oldP) oldP.parentNode.removeChild(oldP);
p.appendChild(document.createTextNode(txt));
p.id = "response";
btn.parentNode.insertBefore(p, btn.nextSibling);
}
</script>
FIDDLE

This should get you started:
function myFunction() {
var form = document.getElementById('q1form'),
output = document.getElementById('output'),
s1 = form['question1'],
n;
for (n = 0; n < s1.length; n++) {
if (s1[n].checked) {
var soru1 = parseInt(s1[n].value);
}
}
output.innerHTML = soru1 === 1 ? "Your answer is correct!"
: "Your answer is not correct" ;
}
Working fiddle here.

You can use:
<form id="q1form">
<input type="radio" name="question1" value="1" id="q1"> true
<input type="radio" name="question1" value="0" id="q2"> false
</form>
<button onclick="myFunction()"> try </button>
<span id="demo"></span>
function myFunction(){
var form = document.getElementById('q1form'),
s1 = form['question1'],
n;
for (n = 0; n < s1.length; n++) {
if (s1[n].checked) {
var soru1= parseInt(s1[n].value);
}
}
if(soru1==1){
document.getElementById("demo").innerHTML="Your answer is correct";
}
else{
document.getElementById("demo").innerHTML="Your answer is not correct";
}
}

Trying to take which radio button is selected and when is put it through code is returns undefined

Hello I'm new to JavaScript and trying to get a radio button to be registered on variable and then have that variable return another var but it just keeps being returned undefined. If I'm just doing something overtly wrong please tell me.
The radio buttons
Fighter:<input type="radio" id="fig" value="1"/>
Cleric:<input type="radio" id="cleric" value="2"/>
Sorcerer:<input type="radio" id="wiz" value="3"/>
my js
var lvl
var bab
if (document.getElementById('fig').checked) {
var cass = document.getElementById('fig').value;
if (cass == 1){
bab = 1;
}
else if (cass == 2){
bab = 2;
}
else{
bab = 3;
}
}
function show(){
var txtOutput = document.getElementById("txtOutput");
txtOutput.value = bab;
}
And my final place its supposed to be submitting.
<input id="txtOutput">
</input>

Add change event listener for all radio inputs and on change of the input, set the value of the textbox.
Document.querySelectorAll Returns a list of the elements within the document that match the specified group of selectors.
Try this:
var elems = document.querySelectorAll('[name="name"]');
Array.prototype.forEach.call(elems, function(elem) {
elem.addEventListener('change', function() {
document.getElementById("txtOutput").value = this.value;
});
});
Fighter:
<input type="radio" id="fig" value="1" name='name' />Cleric:
<input type="radio" id="cleric" value="2" name='name' />Sorcerer:
<input type="radio" id="wiz" value="3" name='name' />
<br>
<input id="txtOutput">

I think this will give you clarity.
var lvl = "";
var bab = "";
function getValues() {
if (document.getElementById('fig').checked) {
bab = "1 : " + document.getElementById('fig').value + "\n";
}
if (document.getElementById('cleric').checked) {
bab += "2 : " + document.getElementById('cleric').value + "\n";
}
if((document.getElementById('wiz').checked)){
bab += "3 : " + document.getElementById('wiz').value;
}
show();
}
function show(){
var txtOutput = document.getElementById("txtOutput");
txtOutput.innerHTML = bab;
}
/* or you can call it when you click on it */
function consoleIt(obj) {
console.log(obj.id + " : " + obj.value);
}
Fighter : <input type="radio" onclick="consoleIt(this);" id="fig" value="1"/>
Cleric : <input type="radio" onclick="consoleIt(this);" id="cleric" value="2"/>
Sorcerer : <input type="radio" onclick="consoleIt(this);" id="wiz" value="3"/>
<button onclick="getValues();">Get Radio Data</button>
<textarea id="txtOutput"> </textarea>