(Sorry still learning javascript) I was looking to make a checklist quiz which gives different results based on how many checkboxes the user checked off. In this case I have 7 checkboxes, and if the user checks off 1 or less they get the zeroToOne response, while if the user checks off 2-7 check boxes they will get the twotoSeven response.
I keep getting the zerotoOne response no matter how many I checkoff, I believe the result is always 1 for some reason. If someone could please help me come up with a solution here, I'd like to add more results and checkbox statements, up to 25. I also believe I wont actually need an array since I am just using a 1 point value as well.
const numericalValues = new Array();
numericalValues["point"]= 1;
function getScore(){
const form = document.forms["form"];
const quest = form.elements["quiz"];
for(i=0; i<quest.length; i++)
{
if(quest[i].checked)
{
score = numericalValues[quest[i].value];
break;
}
}
return score;
};
function getTotal()
{
const totalScore = getScore();
document.getElementById('result').innerHTML =
//"Your total score is: "+totalScore;
getComment(totalScore);
}
const zerotoOne = 'It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!';
const twotoSeven = 'I see that among your many talents and attributes, humility is still part of your charm!';
function getComment(score)
{
if (score <=1)
return zerotoOne;
else if (score >=2 && score <= 7)
return twotoSeven;
}
document.getElementById('submit').onclick=getTotal;
.quiz-form {
margin-left:auto !important;
margin-right:auto !important;
max-width:700px;
}
#form {
text-align:left;
}
<div class = "quiz-form">
<form id="form" name="form">
<fieldset id="controls">
<p>
<label> I enjoy reading for fun.
<input type="checkbox" name="quiz" id="quiz" value="point" />
</label>
</br>
<label> I like to write.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I enjoy other forms of self-expression, such as music and art.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I find discussing ideas with other people exciting.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I enjoy thinking through complex challenges.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I am curious about the world.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I am interested in a wide range of subjects.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</p>
<p>
<input type="button" name="submit" id="submit" value="Submit" />
</p>
<p id="result"></p>
</fieldset>
</form>
First, two housekeeping items:
</br> is not a valid HTML tag. You can use <br> or <br/>.
The id attribute must be unique, you can't have multiple elements with the same id.
Second -- there are a number of issues here. The most immediate, obvious cause of your problem is the break statement in getScore. This will stop the for loop as soon as it finds the first checked element and return 1.
The deeper issue here, even if this is removed, is that you're always returning 1 even without the break, because you're just statically setting score to be = 1 on each iteration. What you need to be doing is incrementing the score with each checked box. What you're currently doing is something like this (there's no reason to use an array):
var pointValue = 1;
function getScore(){
for(...){
if(...){
score = pointValue;
}
}
return score;
}
What you need to be doing is something more like:
var pointValue = 1;
function getScore(){
var score = 0;
for(...){
if(...){
score = score + pointValue;
}
}
return score;
}
This will increase the score each time a checkbox is found, rather than resetting it to 1.
Edit
See Declan McKelvey-Hembree's answer for a proper answer. This is just cleaned up code. I started writing this before his answer was posted, but it is based on the same points (and modernized a bit).
I dunno how that heck your code was supposed to work, but try this:
function getScore() {
const form = document.forms["form"];
const quest = form.elements["quiz"];
let score = 0;
for (let item of quest) {
if (item.checked) score += 1;
}
return score;
}
function getTotal() {
const totalScore = getScore();
document.getElementById("result").innerHTML = getComment(totalScore);
}
const zeroToOne =
"It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!";
const twoToSeven =
"I see that among your many talents and attributes, humility is still part of your charm!";
function getComment(score) {
if (score <= 1) return zeroToOne;
else if (score >= 2 && score <= 7) return twoToSeven;
}
document.getElementById("submit").onclick = getTotal;
.quiz-form {
margin-left:auto !important;
margin-right:auto !important;
max-width:700px;
}
#form {
text-align:left;
}
.column {
display: flex;
flex-direction: column;
}
<div class="quiz-form">
<form id="form" name="form">
<fieldset id="controls">
<p class="column">
<label> I enjoy reading for fun.
<input type="checkbox" name="quiz" />
</label>
<label> I like to write.
<input type="checkbox" name="quiz" />
</label>
<label> I enjoy other forms of self-expression, such as music and art.
<input type="checkbox" name="quiz" />
</label>
<label> I find discussing ideas with other people exciting.
<input type="checkbox" name="quiz" />
</label>
<label> I enjoy thinking through complex challenges.
<input type="checkbox" name="quiz" />
</label>
<label> I am curious about the world.
<input type="checkbox" name="quiz" />
</label>
<label> I am interested in a wide range of subjects.
<input type="checkbox" name="quiz" />
</label>
</p>
<p>
<button name="submit" id="submit" value="Submit" />
</p>
<p id="result"></p>
</fieldset>
</form>
</div>
Related
Hey guys I am having trouble with this
please click that for the instructions.Image did not load in for some reason.
This is my current code, honestly I am confused and dont really know how to approach this. I am new to javascript and was trying to do this as practice for an upcoming exam. I really hope someone can help me figure this out. I know the javascript is not finished and what I currently have is probably wrong but I am just confused on where to take this. Thanks
Function tips() {
var mealCost=parseFloat(document.getElementById("txtMealCost").value);
var Great1= document.getElementById("great");
var Okay2= document.getElementById("okay");
var Poor3= document.getElementById("poor");
var totalCost1= mealCost * .20
if (document.getElementById("great").checked) {
}
}
<h1>Tip Calculator</h1>
<hr>
<span>What was the cost of your meal? </span>
<input type="text" id="txtMealCost" />
<hr>
How would you rate the service?<br>
Great (20%) <input type="radio" name="radServiceQuality" id="great"> <br>
Okay (15%) <input type="radio" name="radServiceQuality" id="okay"> <br>
Poor (10%) <input type="radio" name="radServiceQuality" id="poor"> <br>
<p><input type="button" value="Calculate Tip Amount" onclick="calcTip()">
<div id="output">
</div>
The requirement provided is not clear enough.
Assuming you just need a simple output, what you should do in the function call is,
1.find the value of the selected radio button
document.querySelector('input[name="radServiceQuality"]:checked').value
2a. Decide the tip ratio
if (selected_value = 'great') tip_percentage = 0.2;
2b. Calculate the tip
tip = meal_cost * tip_percentage;
3.output the tip
alert(tip);
You should go through some javascript basic tutorial. And keep on googling.
You can do something like this,
// es6 style function, same as "function(){...}"
tips = () => {
// Getthe selected radio
let selected = document.querySelector(`input[name='radServiceQuality']:checked`);
// If a radio is selected
if (selected) {
// Cast as number
var mealCost = +document.getElementById("txtMealCost").value;
// Format the number as curency
let totalCost = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(selected.value * mealCost);
// Set output string
document.getElementById('output').innerText = totalCost;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IT-130 Exam</title>
</head>
<body>
<h1>Tip Calculator</h1>
<hr>
<span>What was the cost of your meal? </span>
<input type="text" id="txtMealCost" />
<hr> How would you rate the service?
<br> Great (20%) <input type="radio" id='great' name="radServiceQuality" value=".2">
<br> Okay (15%) <input type="radio" id='okay' name="radServiceQuality" value=".15">
<br> Poor (10%) <input type="radio" id='poor' name="radServiceQuality" value=".1"> <br>
<p><input type="button" value="Calculate Tip Amount" onclick="tips()">
<div id="output"></div>
</body>
</html>
IFF the HTML is not allowed to be changed, this shall do the trick:
// Helper function to determine percent to apply
getPercent = selectedId => {
switch (selectedId) {
case 'great':
return .2;
case 'okay':
return .15;
case 'poor':
return .1;
}
};
// es6 style function, same as "function(){...}"
calcTip = () => {
// Getthe selected radio
let selected = document.querySelector(`input[name='radServiceQuality']:checked`);
// If a radio is selected
if (selected) {
// set percent
let percent = getPercent(selected.id);
// Cast as number
var mealCost = +document.getElementById("txtMealCost").value;
// Format the number as curency
let totalCost = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(percent * mealCost);
// Set output string
document.getElementById('output').innerText = totalCost;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IT-130 Exam</title>
</head>
<body>
<h1>Tip Calculator</h1>
<hr>
<span>What was the cost of your meal? </span>
<input type="text" id="txtMealCost" />
<hr> How would you rate the service?<br> Great (20%) <input type="radio" name="radServiceQuality" id="great"> <br> Okay (15%) <input type="radio" name="radServiceQuality" id="okay"> <br> Poor (10%) <input type="radio" name="radServiceQuality" id="poor"> <br>
<p><input type="button" value="Calculate Tip Amount" onclick="calcTip()">
<div id="output">
</div>
</body>
</html>
Hope this helps,
Sorry for the stupid question and the indentation of the code source below. I am completely new to coding. Could someone help me understand why I need to click on the submit button twice to see the second correct answer turn green as per the code below? Worse, when I insert an 'alert' method into the script, the first correct answer turns green only after I click on the 'OK' of the alert window.
Thank you very much
Ehoussoud
function check() {
var cans = document.getElementsByClassName('correct');
for (i = 0; i < cans.length; i++) {
cans[i].className = "cool";
}
}
form {
font-size: 16px;
font-family: Verdana;
}
.cool {
color: lightgreen;
}
<body>
<h1>Premier League 2017/18 Quiz</h1>
<form>
<p>Q1.Which of the three championship teams were promoted to the premier league?
</p><br>
<div class="correct"> <input type="radio" name="Q1" value="A">Wolves,Cardiff,Fulham </div>
<input type="radio" name="Q1" value="B">Wolves,Middlesbrough,Aston Villa
</br>
<p>Q2.Which player made the most assists?<br></p>
<input type="radio" name="Q2" value="A">David Silva</br>
<div class="correct"><input type="radio" name="Q2" value="B">Kevin De Bruyne
</div>
</br>
<input type="button" value="submit" onclick="check()">
</form>
</body>
Using jquery could save you some time when you are working with multiple elements with the same id/class. You were using element.className = "class-name"; You should use element.classList.add("class-name"); like so:
function check(){
var cans=document.getElementsByClassName('correct');
for(i=0;i<cans.length;i++){
cans[i].classList.add("cool");
}
}
Hope this helps!
The problem is that in the first iteration you are renaming one the elements with class correct. So, it you had two elements with this class (How is the case) in the second iteration cans[i] (i = 1) will not exists because cans just have one element. So for that i access cans[0] because it's all going to exists.
function check() {
var cans = document.getElementsByClassName('correct');
var quantity = cans.length;
for (i = 0; i < quantity; i++) {
cans[0].className = "cool";
}
}
form {
font-size: 16px;
font-family: Verdana;
}
.cool {
color: lightgreen;
}
<body>
<h1>Premier League 2017/18 Quiz</h1>
<form>
<p>Q1.Which of the three championship teams were promoted to the premier league?
</p><br>
<div class="correct"> <input type="radio" name="Q1" value="A">Wolves,Cardiff,Fulham </div>
<input type="radio" name="Q1" value="B">Wolves,Middlesbrough,Aston Villa
</br>
<p>Q2.Which player made the most assists?<br></p>
<input type="radio" name="Q2" value="A">David Silva</br>
<div class="correct"><input type="radio" name="Q2" value="B">Kevin De Bruyne
</div>
</br>
<input type="button" value="submit" onclick="check()">
</form>
</body>
I am trying to calculate a score and prompt one of 3 messages depending on the score. However, seems like I can't push the message to lower part of the form. Mind providing some guidance? THANKS!
Diabetes Risk Assessment Tool
The Diabetes Risk Assessment Tool
Please complete the form. Choose an option for each question *
<legend>Questions</legend>
<!-- How old are you?-->
<span>
<label for="age">How old are you? </label>
<input type="radio" value="0" name="age" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="5" name="age" id="#26-40"><label for="26-40">26-40</label>
<input type="radio" value="8" name="age" id="#41-60"><label for="41-60">41-60</label>
<input type="radio" value="10" name="age" id="#60+"><label for="60+">60+</label><br>
</span
<span>
<label for="bmi">What is your BMI? </label>
<input type="radio" value="0" name="bmi" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="0" name="bmi" id="#26-30"><label for="26-30">26-30</label>
<input type="radio" value="9" name="bmi" id="#31-35"><label for="31-35">31-35</label>
<input type="radio" value="10" name="bmi" id="#35+"><label for="35+">35+</label><br>
</span>
Does anybody in your family have diabetes?
No.
Grandparent
Sibling
Parent
How would you describe your diet?
Low-sugar
Normal sugar
Quite high sugar
High sugar
</fieldset>
<div id="displaymessage"></div>
</form>
//create variable radios with the radio button values
var radios = document.getElementsByTagName("input")
function calculateTotal(){
var total = 0;
for (i = 0; i < radios.length; i++) {
----------
if (radios[i].type == 'radio' && radios[i].checked) {
total += Number(radios[i].value);
}
}
return total;
}
//Display message Function
function displaymessage () {
//create empty variable
var message = 0
//run function calculate total and store in score var
score = calculateTotal()
//Depending on your score, you get a message
if (score < 15) {
message = "Your results show that you currently have a low risk of developing diabetes"
}
else if (score > 25) {
message = "Your results show that you currently have a high risk of developing diabetes. Your main risk factors are your" + risk1 + "and your" + risk2 + "We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Your main risk are X and Y."
}
else {
message = "Your results show that you currently have a medium risk of developing diabetes"
}
//push result to element display message on HTML
document.getElementById('displaymessage').innerHTML = message;
}
document.getElementById("displaymessage").submit()
body {
font-family: Verdana, Arial, sans-serif;
}
.sectionheading {
color: #ff0000;
}
#pageheading{
font-style: italic;
}
label {
margin-left: 10px;
}
.radio-buttons input[type="radio"] {
width: 10px;
}
.radio-buttons label {
display: inline;
margin-left: 10px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diabetes Risk Assessment Tool</title>
<link rel="stylesheet" type="text/css" href="examplestyles.css">
<script src="calculate.js"></script>
</head>
<h1>The Diabetes Risk Assessment Tool</h1>
<div class ="radio-inline">
<form id="assessment">
<p><i>Please complete the form. Choose an option for each question </i><em>*</em></p>
<fieldset>
<legend>Questions</legend>
<!-- How old are you?-->
<span>
<label for="age">How old are you? </label>
<input type="radio" value="0" name="age" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="5" name="age" id="#26-40"><label for="26-40">26-40</label>
<input type="radio" value="8" name="age" id="#41-60"><label for="41-60">41-60</label>
<input type="radio" value="10" name="age" id="#60+"><label for="60+">60+</label><br>
</span
<!-- Does anybody in your family have diabetes? -->
<span>
<label for="bmi">What is your BMI? </label>
<input type="radio" value="0" name="bmi" id="#0-25" checked><label for="0-25">0-25</label>
<input type="radio" value="0" name="bmi" id="#26-30"><label for="26-30">26-30</label>
<input type="radio" value="9" name="bmi" id="#31-35"><label for="31-35">31-35</label>
<input type="radio" value="10" name="bmi" id="#35+"><label for="35+">35+</label><br>
</span>
<!-- Does anybody in your family have diabetes? -->
<label for="genetics">Does anybody in your family have diabetes? </label>
<input type="radio" value="0" name="genetics" id="No" checked><label for="no">No.</label>
<input type="radio" value="7" name="genetics" id="grandparent"><label for="grandparent">Grandparent</label>
<input type="radio" value="15" name="genetics" id="sibling"><label for="sibling">Sibling</label>
<input type="radio" value="15" name="genetics" id="parent"><label for="parent">Parent</label><br>
<!-- How would you describe your diet? -->
<label for="diet">How would you describe your diet? </label>
<input type="radio" value="0" name="diet" id="low-sugar" checked><label for="low-sugar">Low-sugar</label>
<input type="radio" value="0" name="diet" id="normal-sugar"><label for="normal-sugar">Normal sugar</label>
<input type="radio" value="7" name="diet" id="quite-highs-sugar"><label for="quite-highs-sugar">Quite high sugar</label>
<input type="radio" value="10" name="diet" id="high-sugar"><label for="high-sugar">High sugar</label><br>
<!-- Calculate -->
<p><input type="submit" name = "calculate" value="Calculate" id=calculate onsubmit= "displaymessage()" </p>
</fieldset>
<div id="displaymessage"></div>
</form>
</div>
</body>
</html>
Your function displaymessage function (that can be written in camel case displayMessage as in Javascript common notation) is not being called properly. To make sure you call this function whenever the form is being submitted, you have to also make sure that you capture the event and prevent it from refreshing the page as it is by default on the <form> html element:
document.getElementById('assessment').addEventListener("submit", function(event) {
event.preventDefault();
displaymessage();
});
Also remove this line from your calculate.js file:
document.getElementById("displaymessage").submit()
and remove onsubmit listener from the input button, it is redundant:
<p><input type="submit" name="calculate" value="Calculate" id="calculate"></p>
making sure that the id has quotes around the value: id="calculate"
Finally, you can get risk1 and risk2 values by storing the values and names from all the radio elements and sorting them afterwards:
first step: Initialise your two variables risk1 and risk2 at the top of your calculate.js file:
var risk1, risk2;
second step: edit your calculateTotal function to this:
function calculateTotal() {
var objectArray = []; // initialise empty array
var total = 0;
for (i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio' && radios[i].checked) {
//save the values and names of the radio buttons into an array of objects
objectArray.push({
value: Number(radios[i].value),
name: radios[i].name
});
total += Number(radios[i].value);
}
}
//sorting the array ascendingly
objectArray.sort(function(a, b){return a.value - b.value});
// getting the name property of the last two values of the array that are the highest in value
risk1 = objectArray[objectArray.length - 1].name;
risk2 = objectArray[objectArray.length - 2].name;
return total;
}
third step: make sure you properly display the message:
if (score < 15) {
message = "Your results show that you currently have a low risk of developing diabetes"
} else if (score > 25) {
message = "Your results show that you currently have a high risk of developing diabetes. Your main risk factors are your " + risk1 + " and your " + risk2 + ". We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Your main risk are " + risk1 + " and " + risk2;
} else {
message = "Your results show that you currently have a medium risk of developing diabetes"
}
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;">
i'm new to Javascript and Jquery and i am trying to create a kind of questionnaire style page.
Essentially i want to ask a question, then once i have chosen an answer make everything in smaller and then display the next question in normal size.
I have most of the page working in terms of showing and hiding but i cant seem to get the code to work when i try to make the initial question text smaller.
Ive read lots of tutorials and examples but none seem to work, i'd really appreciate any guidance.
Thanks in advance !
Here is my HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()">issue4<br/>
</fieldset>
</form>
<br/>
Here is my Javascript:
function getIssueVar() {
var xissue = document.getElementById("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
I have set my css:
.form1
{
font-size:14px;
}
so i was thinking i would use javascript/jquery to change the font size once ive clicked on the radio buttons.
What am i doing wrong ?
HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()" class="testform">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()" class="testform">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()" class="testform">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()" class="testform">issue4<br/>
</fieldset>
</form>
<div id="faultissue"></div>
SCRIPT
function getIssueVar() {
debugger
var xissue = document.getElementsByClassName("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
DEMO
From your code it seems testform class is missing from radio button tag. And an element having id faultissue is missing too.
Here is a jQuery solution using a delegated on() click approach.
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" >issue1
<br>
<input type="radio" name="issue" value="o - issue2" >issue2
<br>
<input type="radio" name="issue" value="o - issue3" >issue3
<br>
<input type="radio" name="issue" value="o - issue4" >issue4
</fieldset>
</form>
.minimize {
font-size: 0.5em;
}
$('fieldset').on('click', 'input[type="radio"]', function() {
$radio = $(this);
$fieldset = $radio.parent();
$fieldset.addClass('minimize');
});
jsFiddle: http://jsfiddle.net/w4L1g2dc/
I added a class but you could set the CSS directly if you wanted.