I'm currently working on a website for a school project which involves HTML, JavaScript, and CSS. For my website I decided to do a dice roll simulation which would calculate and then show dice images randomized. The problem is that the JavaScript portion of the code fails to work at all. The code in the load function which is supposed to change the text in the test paragraph doesn't execute, which makes me think that the problem is occuring with the onload part of the body tag. However, because I'm fairly new to JavaScript I'm not sure what the exact problem is or how to fix it.
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
<meta charset='utf-8'/>
<script>
function loadFunction() {
document.getElementById('rolldice').onclick = rollDice;
document.getElementById('test').innerHTML = 'works';
}
function rollDice() {
var imgstrbase = 'diceimages/'
var dicenum = document.getElementById('numselect').value;
var dicetype = document.getElementById('diceselect').value;
var die1val = randNum(dicetype);
var die1imgstr = imgstrbase.concat(dicetype, String(dice1val), '.jpg');
if (dicenum >= 2) {
var die2val = randNum(dicetype);
var die2imgstr = imgstrbase.concat(dicetype, String(dice2val), '.jpg');
if (dicenum == 3) {
var die3val = randNum(dicetype);
var die3imgstr = imgstrbase.concat(dicetype, String(dice3val), '.jpg');
} else {
var die3imgstr = 'diceimages/grey.jpg';
}
} else {
var die2imgstr = 'diceimages/grey.jpg';
}
document.getElementById('die1img').src = die1imgstr;
document.getElementById('die2img').src = die2imgstr;
document.getElementById('die3img').src = die3imgstr;
}
function randNum(num) {
return Math.floor(Math.random() * num) + 1;
}
</script>
</head>
<body onload='loadFunction();'>
<p id='test'> original </p>
<h1> Dice Roll! </h1>
<form id='numselect'>
<input type='radio' name='list1' value=1 checked> One <br>
<input type='radio' name='list1' value=2> Two <br>
<input type='radio' name='list1' value=3> Three <br>
</form>
<button id='rolldice' type='button'> Roll Dice </button>
<form id='diceselect'>
<input type='radio' name='list2' value='six' checked> Six-Sided <br>
<input type='radio' name='list2' value='twenty'> Twenty-Sided <br>
</form>
<img src='diceimages/grey.jpg' id='die1img'>
<img src='diceimages/grey.jpg' id='die2img'>
<img src='diceimages/grey.jpg' id='die3img'>
</body>
</html>
For reference the dice images are called 'six1.jpg', 'six2.jpg', 'six3.jpg', 'six4.jpg', 'six5.jpg', and 'six6.jpg'. I haven't yet added the twenty-sided die images.
Typo - die1val1 instead of dice1val1
var dice1val = randNum(dicetype);
should be
var die1val = randNum(dicetype);
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
<meta charset='utf-8'/>
<script>
function loadFunction() {
document.getElementById('rolldice').onclick = rollDice;
document.getElementById('test').innerHTML = 'works';
}
function rollDice() {
var imgstrbase = 'diceimages/'
var dicenum = document.getElementById('numselect').value;
var dicetype = document.getElementById('diceselect').value;
var die1val = randNum(dicetype);
var die1imgstr = imgstrbase.concat(dicetype, String(die1val), '.jpg');
if (dicenum >= 2) {
var die2val = randNum(dicetype);
var die2imgstr = imgstrbase.concat(dicetype, String(die2val), '.jpg');
if (dicenum == 3) {
var die3val = randNum(dicetype);
var die3imgstr = imgstrbase.concat(dicetype, String(die3val), '.jpg');
} else {
var die3imgstr = 'diceimages/grey.jpg';
}
} else {
var die2imgstr = 'diceimages/grey.jpg';
}
document.getElementById('die1img').src = die1imgstr;
document.getElementById('die2img').src = die2imgstr;
document.getElementById('die3img').src = die3imgstr;
}
function randNum(num) {
return Math.floor(Math.random() * num) + 1;
}
</script>
</head>
<body onload='loadFunction();'>
<p id='test'> original </p>
<h1> Dice Roll! </h1>
<form id='numselect'>
<input type='radio' name='list1' value=1 checked> One <br>
<input type='radio' name='list1' value=2> Two <br>
<input type='radio' name='list1' value=3> Three <br>
</form>
<button id='rolldice' type='button'> Roll Dice </button>
<form id='diceselect'>
<input type='radio' name='list2' value='six' checked> Six-Sided <br>
<input type='radio' name='list2' value='twenty'> Twenty-Sided <br>
</form>
<img src='diceimages/grey.jpg' id='die1img' alt='die1'>
<img src='diceimages/grey.jpg' id='die2img' alt = 'die2'>
<img src='diceimages/grey.jpg' id='die3img' alt = 'die3'>
</body>
</html>
Related
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click( function() {
var dollarAmount = $('input:text').val();
if ( $("#usa").is(':checked') )
dollarAmount = dollarAmount*1;
if ( $("#russia").is(':checked') )
dollarAmount = dollarAmount * 73.18;
});
});
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
So I need to take the value that's entered in the input box above, and then if they check off any box(s) to then convert each checked boxs currency from US to whatever was selected, and then print out the results each time using if statements.
you can make a function called convert,when convert button click or checkbox click then call that function.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click(convert);
$("input:checkbox").click(convert)
});
function convert(){
var dollarAmount = $('input:text').val();
var result = " "
if ( $("#usa").is(':checked') )
result += dollarAmount*1 + ";";
if ( $("#russia").is(':checked') )
result += dollarAmount * 73.18 + ";";
$("#pasteHere").text(result)
}
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
That is my solution:
$(document).ready(function() {
let selectedCurrencies = [];
$("#convert").click(function() {
let dollarAmount = $('input:text').val();
let checkBoxList = $('input:checked');
let resultText = "";
for (let i = 0; i < checkBoxList.length; i++) {
resultText += "US "+dollarAmount+" dollar =";
switch (checkBoxList[i].id) {
case 'usa':
resultText += dollarAmount * 1;
break;
case "russia":
resultText += dollarAmount * 73.18;
break;
}
resultText+=" "+(checkBoxList[i].nextSibling.textContent)+"<br>";
}
$("#pasteHere").html(resultText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
Hope everyone is having a good weekend!
If you select a Small Cheese pizza the price comes out to $5. However, if you select a Small Cheese and Peanut Butter, it still comes out to $5. I think I might need to add a loop/array. I am definitely missing something. Thanks for your help. Also, I am a total newbie to all of this so no answers that are may seem out of knowledge based off what I have written. Thanks!
var pizzaPrice = 0;
function Pizza(size,toppings,pizzaPrice) {
this.size = size;
this.toppings = toppings;
this.pizzaPrice = 0;
}
Pizza.prototype.price = function() {
if (this.size === "Small") {
this.pizzaPrice += 2;
}
else if (this.size === "Medium") {
this.pizzaPrice += 3;
}
else if (this.size === "Large") {
this.pizzaPrice += 4;
}
if (this.toppings === "Cheese") {
this.pizzaPrice += 3;
}
else if (this.toppings === "Cheese" && this.toppings === "Peanut Butter") {
this.pizzaPrice += 10;
console.log("hey");
}
else if (this.toppings === "Vegetarian") {
this.pizzaPrice += 2;
}
else if (this.toppings === "Supreme") {
this.pizzaPrice += 4;
}
else if (this.toppings === "Pepperoni") {
this.pizzaPrice += 3;
}
return this.pizzaPrice;
}
$(document).ready(function(){
$("form#pizza").submit(function(event){
event.preventDefault();
var size = $("input[type=radio][name=size]:checked").val();
var toppings = $("input[type=checkbox][name=toppings]:checked").val();
var newPizza = new Pizza(size,toppings,pizzaPrice);
newPizza.price();
$("#responses").append("<li>" + "You ordered a " + newPizza.size + " " + newPizza.toppings + " pizza. " + " Your total price is " + newPizza.pizzaPrice + "</li>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Pizza Pizza</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.0.js"></script>
<script src="js/scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Pizza Toppings</h2>
</div>
<form id="pizza">
<div class="form-group">
<p>What size would you like your pizza:</p>
<input type="radio" name="size" value="Small">Small.<br>
<input type="radio" name="size" value="Medium">Medium.<br>
<input type="radio" name="size" value="Large">Large.<br>
</div>
<div class="form-group">
<p>Which toppings would you like</p>
<input type="checkbox" name="toppings" value="Cheese">Cheese.<br>
<input type="checkbox" name="toppings" value="Vegetarian">Vegetarian.<br>
<input type="checkbox" name="toppings" value="Supreme">Supreme.<br>
<input type="checkbox" name="toppings" value="Pepperoni">Pepperoni.<br>
<input type="checkbox" name="toppings" value="Fruit">Fruit.<br>
<input type="checkbox" name="toppings" value="Bacon">Bacon.<br>
<input type="checkbox" name="toppings" value="Artichoke">Artichoke.<br>
<input type="checkbox" name="toppings" value="Peanut Butter">Peanut butter.<br>
</div>
<button type="submit">Let's get your order</button>
</form>
<ul id="responses">
</ul>
</div>
</body>
</html>
Firstly, you need to get values of all checked toppings in an array, currently you are getting only the first one. Then you need to add prices for each topping selected while calculating the price. you can use indexOf for this:
var pizzaPrice = 0;
function Pizza(size,toppings,pizzaPrice) {
this.size = size;
this.toppings = toppings;
this.pizzaPrice = 0;
}
Pizza.prototype.price = function() {
if (this.size === "Small") {
this.pizzaPrice += 2;
}
else if (this.size === "Medium") {
this.pizzaPrice += 3;
}
else if (this.size === "Large") {
this.pizzaPrice += 4;
}
if (this.toppings.indexOf("Cheese") >= 0) {
this.pizzaPrice += 3;
}
if (this.toppings.indexOf("Peanut Butter") >= 0) {
this.pizzaPrice += 10;
}
if (this.toppings.indexOf("Vegetarian") >= 0) {
this.pizzaPrice += 2;
}
if (this.toppings.indexOf("Supreme") >= 0) {
this.pizzaPrice += 4;
}
if (this.toppings.indexOf("Pepperoni") >= 0) {
this.pizzaPrice += 3;
}
return this.pizzaPrice;
}
$(document).ready(function(){
$("form#pizza").submit(function(event){
event.preventDefault();
var size = $("input[type=radio][name=size]:checked").val();
var toppings = [];
$("input[type=checkbox][name=toppings]:checked").each(function(){
toppings.push($(this).val());
});
var newPizza = new Pizza(size,toppings,pizzaPrice);
newPizza.price();
$("#responses").append("<li>" + "You ordered a " + newPizza.size + " " + newPizza.toppings + " pizza. " + " Your total price is " + newPizza.pizzaPrice + "</li>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Pizza Pizza</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.0.js"></script>
<script src="js/scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Pizza Toppings</h2>
</div>
<form id="pizza">
<div class="form-group">
<p>What size would you like your pizza:</p>
<input type="radio" name="size" value="Small">Small.<br>
<input type="radio" name="size" value="Medium">Medium.<br>
<input type="radio" name="size" value="Large">Large.<br>
</div>
<div class="form-group">
<p>Which toppings would you like</p>
<input type="checkbox" name="toppings" value="Cheese">Cheese.<br>
<input type="checkbox" name="toppings" value="Vegetarian">Vegetarian.<br>
<input type="checkbox" name="toppings" value="Supreme">Supreme.<br>
<input type="checkbox" name="toppings" value="Pepperoni">Pepperoni.<br>
<input type="checkbox" name="toppings" value="Fruit">Fruit.<br>
<input type="checkbox" name="toppings" value="Bacon">Bacon.<br>
<input type="checkbox" name="toppings" value="Artichoke">Artichoke.<br>
<input type="checkbox" name="toppings" value="Peanut Butter">Peanut butter.<br>
</div>
<button type="submit">Let's get your order</button>
</form>
<ul id="responses">
</ul>
</div>
</body>
</html>
The statement here
var toppings = $("input[type=checkbox][name=toppings]:checked").val();
is incorrect. As it is returning you the value of first checked checkbox.
Instead use following statement to get an array of checked values.
var toppings = $("input[type=checkbox][name=toppings]:checked").get();
Now while retrieving the values you can use the following:
(this.toppings.indexOf("Cheese") >= 0)
The indexOf() returns -1 if no matching results is found.
Hope this solves your problem.
There are a number of issues -
1.) When you do
var toppings = $("input[type=checkbox][name=toppings]:checked").val();
you already lost all the toppings except the first one. Instead you could use
var toppings = $("input[type=checkbox][name=toppings]:checked");
var i = 0;
var toppingVal;
while(i < toppings.length){
toppingVal += " "+(toppings[i]).value;
i++;
}
2.) When you are calculating the price, you make use of if..else..if blocks. How can you add up multiple toppings, only one block would execute. use only if
3.) As per my suggestion you would get a string of toppings seperated by a space(' '). So you cannot be using === for comparison. Use indexOf to find if the toppings string contains a specific topping.
Take a look at this fiddle
https://jsfiddle.net/8u67x4nm/1/ . Works fine.
When I click on back button of next page the check box value should not be reset.
It should be same as I checked or unchecked. The code from the first and next page is below.
First Page
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="code" value="ECE">ECE<br>
<input type="checkbox" name="code" value="CSE">CSE<br>
<input type="checkbox" name="code" value="ISE">ISE<br>
<br>
<input type="button" onclick="dropFunction()" value="save">
<br><br>
<script>
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
</script>
</form>
</body>
</html>
Next Page
<html>
<head>
<title>Welcome to </title>
</head>
<body color="yellow" text="blue">
<h1>welcome to page</h1>
<h2>here we go </h2>
<p> hello everybody<br></p>
</body>
<image src="D:\images.jpg" width="300" height="200"><br>
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.location.href="first.html";
}
</script>
</body>
</html>
Full solution: example. First add ids to your checkboxes:
<input type="checkbox" name="code" value="ECE" id='1'>ECE<br>
<input type="checkbox" name="code" value="CSE" id='2'>CSE<br>
<input type="checkbox" name="code" value="ISE" id='3'>ISE<br>
<input id="spy" style="visibility:hidden"/>
Then change your dropFunction:
function dropFunction() {
var branch = document.getElementsByName("code");
var out = "";
localStorage.clear();
for (var i = 0; i < branch.length; i++)
if (branch[i].checked == true)
localStorage.setItem(branch[i].id, true);
for (var i = 0; i < branch.length; i++) {
if (branch[i].checked == true) {
out = out + branch[i].value + " ";
window.location.href="next.html";
}
}
}
And add some new javascript code to first.html:
window.onload = function() {
var spy = document.getElementById("spy");
if(spy.value=='visited')
for(var i=1;i<=3;i++)
if(localStorage.getItem(i))
document.getElementById(i).checked=true;
spy.value = 'visited';
}
I have this html code with javascript. My average value displays correctly but my find minimum is not displaying anything. Its supposed to show when the user clicks on the find min button on the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var calculateGrade = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) ) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("average").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if ( (exam1<exam2) && (exam1<exam3)){
$("mini").value=exam1;}
else if ((exam2<exam1) && (exam2<exam3)){
$("mini").value=exam2;}
else {
$("mini").value=exam3;
}
}
window.onload = function () {
$("calculate").onclick = calculateGrade;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate Average</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="average"disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var average = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("result").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
} else {
$("result").value = Math.min(exam1,exam2,exam3);
}
}
window.onload = function () {
$("average").onclick = average;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="result" disabled ><br>
<label> </label>
<input type="button" id="average" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>
The issue is with the min function. Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button "mini" (which is incorrect).
Update:
You need to be including one more textbox <input type="text" id="txtMin" disabled ><br>
and update your min function to set the value of it, as follows:
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;
I am having trouble displaying the results on my form under the questions. I thought I had it right. Also I need to create an Array that will hold the answers, which it will randomly pick one, doesnt have to go by the answers. I can't figure out how to display the results on the same page (I have looked and had no luck) Could anyone help me
<!doctype html>
<html>
<?php
include "menu.html"
?>
<head>
<meta charset="UTF-8">
<title>Form</title>
<link href="styles.css" rel="stylesheet">
<script>
function checkForm(){
var chk = true;
var Name = document.getElementById("txt");
var methd= document.getElementById("method");
var rad1= document.getElementById("radM");
var sel= document.getElementById("selM");
var necro = document.getElementById("a");
var guard = document.getElementById("b");
var ele = document.getElementById("c");
var shatter = document.getElementById("imp");
var cor = 0;
Name.style.backgroundColor="#fff";
methd.setAttribute("style", "display:none");
rad1.setAttribute("style", "display:none");
sel.setAttribute("style", "display:none");
if (Name.value==''){
Name.style.backgroundColor = "red";
methd.setAttribute("style", "display:inline");
chk = false;
}
if ((necro.checked==false) && (guard.checked==false) && (ele.checked==false)){
rad1.setAttribute("style", "display:inline");
}
if (shatter.value==0){
selM.setAttribute("style", "display:inline");
}
if (chk==false){
document.getElementById("error").setAttribute("style", "display:inline");
} else {
if (Name.value=="no"){
document.getElementById(txt).innerHTML += 'No';}
if (Name.value=="yes"){
document.getElementById(txt).innerHTML += 'Yes';}
if (ele.checked == true){
document.getElementById(c).innerHTML += 'Elementalist';}
if (necro.checked == true){
document.getElementById(a) += 'Necromancer';}
if (guard.checked == true){
document.getElementById(b) +='Guardian';}
if (shatter.value==1){
document.getElementById(imp) += 'Shatter';
}
if (shatter.value==2){
document.getElementById(imp) += 'Sunless';
}
if (shatter.value==3){
document.getElementById(imp) += 'Claw';
}
style.display = "inline";
innerHTML = "<span>You chose " + imp + txt + " correct!</span>";
}
}
</script>
</head>
<body>
<div class="page">
<article>
<div id="error" class="error"></div>
<h1>What Guild Wars 2 Profession Are You</h1>
<div class="cssTable" style="margin-top:-25px;">
<form method="post" action="thankyou.php" >
<table>
<tr><td colspan="3"></td></tr>
<tr>
<td><div align="right">In Guild Wars 2 Do You Like To Do Damage? </div> </td><td width="217"><input id="txt" name="txt" type="text" size="25"> <br/></td><td><div id="method" style="display:none"><img height="25px" src="purple.png" ></div></td><br/></tr>
<tr>
<td><div align="right">What Best Describes You?</div></td><td>
<input id="a" type="radio" name = "group1" value="A">Healer</input><br/>
<input id="b" type="radio" name = "group1" value="B">One With The Elements</input><br/>
<input id="c" type="radio" name = "group1" value="C">Darkness</input>
</td><td><div id="radM" style="display:none"><img height="25px" src="purple.png"></div></td>
</tr>
<tr>
<td>What One Skill Would You Like To Have?</td>
<td>
<select id="imp"><option value="0" selected="true">Pick A Skill</option>
<option value="1">Stealth</option>
<option value="2">Summon Illusions</option>
<option value="3">Great With A Bow and Arrow</option></select>
</td><td><div id="selM" style="display:none"><img height="25px" src="purple.png"></div></td>
</tr>
<tr><td colspan="3" align="right"><input type="button" class="styled-button-7" value="Send" onclick="checkForm()" /><span id="grde" style="padding-left:25px"> </span></td></tr></table></form></div></article>
</main></div>
</body>
</html>
I moved your call to checkForm() from an onclick on a button to the onsubmit of the form, and started returning chk from checkForm(). You should go through your checkForm() function and start making it work field by field. There are properties that you're trying to access incorrectly.
You can see it at:
http://jsbin.com/homeq/1/