I'm playing around with a javascript quiz but I'm having trouble showing the results. I would like the user to see the correct results when the user clicks on "Submit Answers" but nothing happens.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Simple JavaScript Quiz </title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"> </script>
</head>
<body>
<div id="container">
<header>
<h1> Simple JavaScript Quiz</h1>
<p> Test your knowledge in <strong>JavaScript fundamentals</strong></p>
</header>
<section>
<div id="results"> </div>
<form name="quizForm" onsubmit="return submitAnswers()">
<h3>1. In which elements do we put in JavaScript code?</h3>
<img src="scam.png" alt="Italian Trulli">
<input type="radio" name="q1" value="a" id="q1a">a. <js><br>
<input type="radio" name="q1" value="b" id="q1b">b. <script><br>
<input type="radio" name="q1" value="c" id="q1c">c. <body><br>
<input type="radio" name="q1" value="d" id="q1d">d. <link><br>
<h3>2. Which HTML attribute is used to reference an external JavaScript file?</h3>
<input type="radio" name="q2" value="a" id="q2a">a. src<br>
<input type="radio" name="q2" value="b" id="q2b">b. rel<br>
<input type="radio" name="q2" value="c" id="q2c">c. type<br>
<input type="radio" name="q2" value="d" id="q2d">d. href<br>
<h3>3. How would you write "Hello" in an alert box?</h3>
<input type="radio" name="q3" value="a" id="q3a">a. msg("Hello");<br>
<input type="radio" name="q3" value="b" id="q3b">b. alertBox("Hello");<br>
<input type="radio" name="q3" value="c" id="q3c">c. document.write("Hello");<br>
<input type="radio" name="q3" value="d" id="q3d">d. alert("Hello");<br>
<input type="submit" value="Submit Answers"> <br><br>
</form>
</section>
</div>
</body>
</html>
And this is my javascript code:
function submitAnswers() {
var total = 3;
var score = 0;
// get user input
var q1 = document.forms["quizForm"]["q1"].value;
var q2 = document.forms["quizForm"]["q2"].value;
var q3 = document.forms["quizForm"]["q3"].value;
// set correct answers
var answers = ['b', 'a', 'd'];
// check answers (note i - 1 to account for array starting with [0])
for (var i = 1; i <= total; i++) {
if (eval("q" + i) == answers[i - 1]) {
score++;
}
}
// display results
var results = document.getElementById("results");
results.innerHTML ='<h3>You Scored <span> '+score+' </span> out of <span>'+total+'</span> </h3>';
alert('You Scored '+score+' out of '+total);
}
After I click "Submit Answers" nothing happens. Any ideas?
Instead of adding onsubmit property directly in form element, add submit event listener on it and prevent the event from default behavior. Default behavior of submitig a form is refreshing whole page.
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
submitAnswers();
})
Related
I'm building a very simple quiz and I've hit a small wall. So my structure is that I've made 5 questions (using radio buttons) giving the correct radio button an ID, and then in JavaScript I'd target those radio buttons. But the answers I'd store in a array. I've tested it out on the first question to see if the array index would work in my if statement but it does not. For example: if(radio1.checked === answers[0]) then it should alert saying that its correct. But instead it does my else statement, not sure how I could go by doing this, any suggestions?
SIDE NOTE: I'm new to JavaScript so I want to learn how to use arrays properly
var score = 0;
var radio1 = document.getElementById('correctradio1');
var submit = document.getElementById('submit');
submit.addEventListener('click', function quiz(){
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
if(radio1.checked === answers[0]) {
document.getElementById('results').innerHTML = "yes thats correct";
}else{
alert('nope');
}
});
<h2>
Knowlegde Quiz
</h2>
<br>
<p>What is the color of the sun?</p>
<input type="radio" name="selection" id="correctradio1"> Yellow<br>
<input type="radio" name="selection" > Green<br>
<input type="radio" name="selection" > Blue
<p>Who is the President?</p>
<input type="radio" name="selection" id="correctradio2"> Donald trump<br>
<input type="radio" name="selection"> Beyonce<br>
<input type="radio" name="selection"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection"> Marvin gaye<br>
<input type="radio" name="selection"> Toni braxton<br>
<input type="radio" name="selection" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="selection"> Green<br>
<input type="radio" name="selection"> pink<br>
<input type="radio" name="selection" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="selection"> Elmo<br>
<input type="radio" name="selection" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>
Radio buttons need to have a value set for them so that it has meaning when you select one. That value is what you want to compare against your array values. Your code tries to compare the true/false value of the checked property against the answers in your array, which will always result in an incorrect answer because true (the value of the checked property on the checked radio button) is not one of the correct answers.
Next, if you always compare the value of the "correct answer" radio button against the correct answers, you'll never get a wrong answer. When the submit button is pressed, you need to look for which button (from each group) was checked and compare each value against the corresponding correct answer in the array.
Additionally, each group of radio buttons must have a name that is different from the other groups, so that each group can have one choice selected. Right now, in your code, you can only select one radio button from all the choices.
var score = 0;
var submit = document.getElementById('submit');
var result = document.getElementById('results')
var answers = ['Yellow', 'Donald Trump', 'Michael Jackson', 'red', 'Oscar'];
submit.addEventListener('click', function quiz(){
// You need to get the checked radio button at the time that the submit button is pressed.
var checkedRadioButton1 = document.querySelector("input[name='selection1']:checked");
// Compare the *value* of the radio button against the value in the array.
if(checkedRadioButton1.value == answers[0]) {
result.textContent = "yes thats correct";
}else{
alert('nope');
}
});
<h2>
Knowlegde Quiz
</h2>
<p>What is the color of the sun?</p>
<input type="radio" name="selection1" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection1" value="Green"> Green<br>
<input type="radio" name="selection1" value="Blue"> Blue
<p>Who is the President?</p>
<input type="radio" name="selection2" id="correctradio2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="selection2" value="Beyonce"> Beyonce<br>
<input type="radio" name="selection2" value="Blue Ivy"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="selection3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="selection3" value="Michael Jackson" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="selection4" value="green"> Green<br>
<input type="radio" name="selection4" value="pink"> pink<br>
<input type="radio" name="selection4" value="red" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="selection5" value="Elmo"> Elmo<br>
<input type="radio" name="selection5" value="Jim Henson" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection5" value="Oscar"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>
While this is a good first approach for someone that is new to JavaScript, it really is pretty wasteful in terms of coding. A much more streamlined approach would be as follows (read the comments for explanation):
var score = 0;
var submit = document.getElementById('submit');
var result = document.getElementById('results')
var incorrect = [];
// When comparing strings, remember that case matters. Store all the strings
// as lower case and then later, we'll compare lower case against lower case.
var answers = ['yellow', 'donald trump', 'michael jackson', 'red', 'jim henson'];
submit.addEventListener('click', function(){
// Reset game
incorrect = [];
score = 0;
// Get the checked radio button from each group and place into an array
var checkedByGroup = Array.prototype.slice.call(document.querySelectorAll("input[type='radio']:checked"));
// Count how many checks were made and if the user didn't answer all
// the questions, exit with a message:
if(checkedByGroup.length < answers.length){
alert("You didn't answer all the questions! Try again!");
return;
}
// Now you have two arrays: one with all the correct answers and
// one with radio buttons. Both arrays have the same amount of items
// and each index in each array corresponds to each other.
// Loop through the correct answers:
answers.forEach(function(value, index){
// Compare the answer against the corresponding radio button array
// Remember to compare lower case against lower case!
if(checkedByGroup[index].value.toLowerCase() === value){
score++; // Add a point
} else {
incorrect.push(index + 1); // Add question number to incorrect array
}
});
// If you didn't get a perfect score:
if(score !== 5){
// Tell the player which questions they got wrong
alert("You got question(s) " + incorrect.join() + " wrong!");
}
// Either way, report the score
result.textContent = "You got " + score + " right!";
});
<h2>Knowlegde Quiz</h2>
<p>What is the color of the sun?</p>
<input type="radio" name="q1" value="Yellow"> Yellow<br>
<input type="radio" name="q1" value="Green"> Green<br>
<input type="radio" name="q1" value="Blue"> Blue
<p>Who is the President?</p>
<input type="radio" name="q2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="q2" value="Beyonce"> Beyonce<br>
<input type="radio" name="q2" value="Blue Ivy"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="q3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="q3" value="Michael Jackson"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="q4" value="green"> Green<br>
<input type="radio" name="q4" value="pink"> pink<br>
<input type="radio" name="q4" value="red"> red
<p>Who created the Muppets?</p>
<input type="radio" name="q5" value="Elmo"> Elmo<br>
<input type="radio" name="q5" value="Jim Henson"> Jim Henson<br>
<input type="radio" name="q5" value="Oscar"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3 id="results"></h3>
Radio button need to have value and instead of using getElementById use querySelector. like below.
var score = 0;
var submit = document.getElementById('submit');
submit.addEventListener('click', function quiz(){
var radio1 = document.querySelector('input[name="selection"]:checked').value;
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
console.log(radio1);
if(radio1 === answers[0]) {
document.getElementById('results').innerHTML = "yes thats correct";
}else{
alert('nope');
}
});
<h2>
Knowlegde Quiz
</h2>
<br>
<p>What is the color of the sun?</p>
<input type="radio" name="selection" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection" value="Green"> Green<br>
<input type="radio" name="selection" value="Blue"> Blue<br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>
You're really close. You actually don't need the array of answers because you've already marked your answers with the class "correctradioX".
You can complete this by just adding each one into the if as I've done below.
var score = 0;
var radio1 = document.getElementById('correctradio1');
var radio2 = document.getElementById('correctradio2');
var radio3 = document.getElementById('correctradio3');
var radio4 = document.getElementById('correctradio4');
var radio5 = document.getElementById('correctradio5');
var submit = document.getElementById('submit');
submit.addEventListener('click', function quiz(){
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
if (radio1.checked &&
radio2.checked &&
radio3.checked &&
radio4.checked &&
radio5.checked) {
document.getElementById('results').innerHTML = "yes thats correct";
} else {
alert('nope');
}
});
<h2>
Knowlegde Quiz
</h2>
<br>
<p>What is the color of the sun?</p>
<input type="radio" name="q1" id="correctradio1"> Yellow<br>
<input type="radio" name="q1" > Green<br>
<input type="radio" name="q1" > Blue
<p>Who is the President?</p>
<input type="radio" name="q2" id="correctradio2"> Donald trump<br>
<input type="radio" name="q2"> Beyonce<br>
<input type="radio" name="q2"> Blue Ivy
<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3"> Marvin gaye<br>
<input type="radio" name="q3"> Toni braxton<br>
<input type="radio" name="q3" id="correctradio3"> Michael Jackson
<p>What color is Elmo?</p>
<input type="radio" name="q4"> Green<br>
<input type="radio" name="q4"> pink<br>
<input type="radio" name="q4" id="correctradio4"> red
<p>Who created the Muppets?</p>
<input type="radio" name="q5"> Elmo<br>
<input type="radio" name="q5" id="correctradio5"> Jim Henson<br>
<input type="radio" name="q5"> Oscar<br><br>
<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct</h3>
I have a radio form questionnaire that should when the user submits their results take them to a specific page. However since adding the code to make sure that all the radio buttons have to be checked before the user can submit the code acts incorrectly, always taking the user to one specific page (the last in the below if statement (software.html).
This is the code for the html questionnaire
<form id="quiz">
<!-- Question 1 -->
<h2>Do you enjoy fixing things</h2>
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<div class="questionsWrap">
<label><input type="radio" name="q1" id="q1" value="c1">
Yes
</label><br />
<label><input type="radio" name="q1" id="q1" value="c2">
No
</label><br />
<label><input type="radio" name="q1" id="q1" value="c3">
Maybe
</label><br />
</div>
<div class="questionsWrap">
<!-- Question 2 -->
<h2>Do you enjoy problem solving?</h2>
<!-- Here are the choices for the second question. Notice how each input tag has the same name (q2), but a different name than the previous question. -->
<label><input type="radio" name="q2" value="c2">
Yes
</label><br />
<label><input type="radio" name="q2" value="c1">
No
</label><br />
<label><input type="radio" name="q2" value="c3">
Unsure
</label><br />
</div>
<div class="questions">
<!-- Question 3 -->
<h2>Do you enjoy maths?</h2>
<!-- Choices for the third question -->
<label><input type="radio" name="q3" value="c2">
Yes
</label><br />
<label><input type="radio" name="q3" value="c1">
No
</label><br />
<label><input type="radio" name="q3" value="c3">
Unsure
</label><br />
</div>
<div class="questions">
<!-- Question 4 -->
<h2>Do you often take thing apart to rebuild them?</h2>
<!-- Choices for the fourth question -->
<label><input type="radio" name="q4" value="c1">
Yes
</label><br />
<label><input type="radio" name="q4" value="c2">
No
</label><br />
<label><input type="radio" name="q4" value="c3">
I have never done it before so i don't know
</label><br />
</div>
<div class="questions">
<!--Question 5 -->
<h2>Hardware or Software?</h2>
<label><input type="radio" name="q5" value="c1">
Hardware</label><br />
<label><input type="radio" name="q5" value="c2">
Software</label><br />
</div>
<button type='button' id="submit" onclick="answers()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
</form>
This is the code that calculates the questionnaire result
<script>
function answers(){
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i=0; i<choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score,c2score,c3score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
window.location.href='Hardware.html';
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
window.location.href='Software.html';
}
/* if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
alert("no third career sector page currently exists in this version");
window.location.href='questionnaire1.html';
}
*/
// If you add more choices, you must add another response below.
}
</script>
This is the code that causes the issue, it should stop the user from submitting the form if not all the radio buttons have been submitted.
<script>
$(function(){
$('button[type=button]').click(function(){
var all_answered = true;
$(':radio').each(function(){
if($(':radio[name='+$(this).attr('name')+']:checked').length == 0)
{
all_answered = false;
}
});
alert(all_answered);
});
});
</script>
in an attempt to make practical use of the skills I am learning on my web development course I am trying to create a website about the Vikings for my partner's Primary school class.
I have managed to get the HTML and CSS as I want it, but I'm struggling a little with the Javascript. it all looks fine to my mind but doesn't run as intended.
I have a quiz and a submit button. When clicked this button will reference a "checkresults" function in my .js file.
This should then calculate a result between 0 - 3 and post this result into the HTML page. I have designed the box the results will show in to be invisible until the "Submit" button is clicked. However, when ran the results box appears for only a second before disappearing and I cannot figure out why.
any help or advice would be very much appreciated!
//JAVASCRIPT//
function checkresults() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "793") {
correct++;
}
if (question2 == "Shield") {
correct++;
}
if (question3 == "1066") {
correct++;
}
var message = ["You're a real Viking!", "Not bad but you can do better!",
"Odin would not be pleased with your effort!"];
var range;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct > 2) {
range = 0;
}
document.getElementById("afterSubmit").style.visibility = "visible"
document.getElementById("message").innerHTML = message[ramge];
document.getElementById("correct").innerHTML = "You got " + correct + "
correct!";
}
//HTML//
<form id="quiz" name="quiz">
<p>When did the Vikings first invade Britain?</p>
<input type="radio" id="mc" name="question1" value="1066" />1066<br />
<input type="radio" id="mc" name="question1" value="793" />793<br />
<input type="radio" id="mc" name="question1" value="411" />411<br />
<input type="radio" id="mc" name="question1" value="1999" />1999<br />
<p>what did every man need before he was allowed to go Viking?</p>
<input type="radio" id="mc" name="question2" value="Shield" />Shield<br />
<input type="radio" id="mc"name="question2" value="Sword" />Sword<br />
<input type="radio" id="mc"name="question2" value="Cloak" />Cloak<br />
<input type="radio" id="mc" name-"question2" value="Gold" />Gold<br />
<p>when did the Viking age end?</p>
<input type="radio" id="mc" name="question3" value="793" />793<br />
<input type="radio" id="mc" name="question3" value="1999" />1999<br />
<input type="radio" id="mc" name="question3" value="1066" />1066<br />
<input type="radio" id="mc" name="question3" value="1500" />1500<br />
<input type="submit" id="button" value="Lets see how you did!" onclick =
"checkresults();">
</form>
<div id="afterSubmit">
<p id="message"></p>
<p id="correct"></p>
//CSS//
#afterSubmit {
visibility: hidden;
border-color: red;
border-style: solid;
border-width: 5px;
}
Your page is refreshing.
The best way to change this would be to move the function to the form onsubmit event.
//Remove the onclick
<input type="submit" id="button" value="Lets see how you did!" onclick="checkresults();">
Add the function and return false to the event on the form, so it cancels submission
//Add the onsubmit, notice the return false, so it cancels submission
<form id="quiz" name="quiz" onsubmit="checkresults();return false;">
Html Code: -
<input type="radio" name="radio" id="radio" value="1" onclick="validate()"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" id="radio" value="2" onclick="validate()"> For Users</input>
</p>
And JavaScript Code : -
function validate()
{
var btn_value=document.getElementById("radio").value;
if(btn_value==true)
{
alert(btn_value);
}
}
Now, whenever I am trying to print the value of radio button. It is always printing value as 1.
So, Now I don't understand what exactly am I missing here...
Thanx in advance for your help.
Elements ID should be unique. I modified your HTML and JS part and check below
Try this
HTML
<p>
<input type="radio" name="radio" id="radio1" value="1" onclick="validate(this)"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" id="radio2" value="2" onclick="validate(this)"> For Users</input>
</p>
JavaScrpit
function validate(obj)
{
var btn_value=obj.value;
if(btn_value==true)
{
alert(btn_value);
}
}
first of all never use a DOMID twice in your html!
remove them.... only use dublicated names!
<input type="radio" name="radio" value="1" onclick="validate()"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" value="2" onclick="validate()"> For Users</input>
</p>
with the js check every element with the name attribute!
function validate() {
var elements = document.getElementsByName("radio");
for(var n = 0; n < elements.length; n++) {
if(elements[n].checked === true) {
alert(elements[n].value);
}
}
}
if you use your validate method ONLY in the onclick you can pass the domelement in the validate methode like this:
<input type="radio" name="radio" value="1" onclick="validate(this)"> For Yourself</input> </p>
and your js:
function validate(domElement) {
if(domElement.checked === true) {
alert(elements[n].value);
}
}
try this
<input type="radio" name="radio" id="radio" value="1" onclick="validate(this)"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" id="radio" value="2" onclick="validate(this)"> For Users</input>
</p>
function validate(ele)
{
alert(ele.value);
}
IDs MUST be unique, it's a mistake to give it the same id.
You can give the IDs a running number (- radio1,radio2 etc) and loop through them to check which one was selected.
I've a set of radio buttons and a checkbox on the page like below
<html>
<head>
<title>Languages</title>
<script type="text/javascript">
</script>
</head>
<body>
<span>What languages do you know?</span>
<form action="">
<div id="controlArea">
<input type="radio" name="lanRadio" value="radioRussian"><label for="radioRussian">Russian</label><br />
<input type="radio" name="lanRadio" value="radioEnglish"><label for="radioRussian">English</label><br />
<input type="radio" name="lanRadio" value="radioSpain"><label for="radioRussian">Spain</label><br />
<input type="radio" name="lanRadio" value="radioFrench"><label for="radioRussian">French</label><br />
<input type="checkbox" name="checkIn" value="CheckMore"><label for="CheckMore">More than 1</label><br />
</div>
</form>
</body>
What I want to do is, if a user checks the "More than 1" checkbox, all radio buttons must turn into checkboxes and users must be able to check more options. If the user unchecks the checkbox, all the checkboxes must turn back into a set of radio buttons. When changing radiobuttons to checkboxes, the selected radio button must become the checked checkbox.
You could do something like this :
function morethan(cbox) {
// setup new state
var state = "radio";
if (cbox.checked) {
state = "checkbox";
}
// get all by name and change state
var radios = document.getElementsByName('lanRadio');
for (i = 0; i < radios.length; i++) {
radios[i].type = state;
}
}
You need to add an onclick handler to your checkbox :
<input type="checkbox" name="checkIn" onclick="morethan(this)" value="CheckMore">
Example here
Try this . Just copy and paste my code
<html>
<head>
<title>Languages</title>
<script type="text/javascript">
if(document.getElementById("radio1").type=="radio")
{
document.getElementById("radio1").type="checkbox";
document.getElementById("radio2").type="checkbox";
document.getElementById("radio3").type="checkbox";
document.getElementById("radio4").type="checkbox";
}
else
{
document.getElementById("radio1").type="radio";
document.getElementById("radio2").type="radio";
document.getElementById("radio3").type="radio";
document.getElementById("radio4").type="radio";
}
</script>
</head>
<body>
<span>What languages do you know?</span>
<form action="">
<div id="controlArea">
<input type="radio" id="radio1" name="lanRadio" value="radioRussian"><label for="radioRussian">Russian</label><br />
<input type="radio" id="radio2" name="lanRadio" value="radioEnglish"><label for="radioRussian">English</label><br />
<input type="radio" id="radio3" name="lanRadio" value="radioSpain"><label for="radioRussian">Spain</label><br />
<input type="radio" id="radio4" name="lanRadio" value="radioFrench"><label for="radioRussian">French</label><br />
<input type="checkbox" name="checkIn" value="CheckMore" onchange="fnc()"><label for="CheckMore">More than 1</label><br />
</div>
</form>
</body>