I’m brand new to the world of Javascript and Jquery and I'm currently working on designing a unique questionnaire-style webpage.
My goal is to pose a question, then once an answer has been selected, shrink the text and display the next question in its normal size.
I’ve managed to get most of the page to function properly in terms of showing and hiding elements. However, I’m facing difficulty in reducing the initial question text size. Despite reading various tutorials and examples, I haven’t been able to find a solution that works. Any guidance would be greatly appreciated.
Thank you in advance!
Here is the HTML snippet I’m working with:
<form>
<fieldset class="form1">
<p>What problem is the customer experiencing?</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/>
Below is the Javascript snippet:
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’ve also defined my CSS:
.form1
{
font-size:14px;
}
My plan was to use Javascript/jQuery to adjust the font size once a radio button is clicked. However, it doesn’t seem to be working as expected. What am I missing here?