/    Sign up×
Community /Pin to ProfileBookmark

Onclick problem.. ( I think )

Hi guys,

I’m writing ( trying to ) a Javascript Quiz which dynamicaly shows the questions one at a time on the same page. This much I have working..

What I’m having problems with is that the user can click on their selected answer text ( on a radio button ) to go to the next question. But, if they click the radio button itself. It does nothing.

I assume it has something to do with the label?
But I need that as it’s used to dynamicaly change the text for each question.

Can anyone help?

The Form bit.

[CODE]
<FORM name=formquiz class=”style1″>
<div align=”center”></div>
<p id=QuesNo>Question: x of 20. </p>

<TABLE width=600 border=1 align=”center” cellPadding=1 cellSpacing=1 bgcolor=”#CCCCCC”>
<TBODY>
<TR>
<TD width=”600″ height=”106″ valign=”top” bgcolor=”#FFFFFF”><div align=”center”>
<div align=”center”><strong><P id=Question>Here is the question to be asked. </P></strong></div>

<div>
<INPUT name=r1 type=radio id=r0 value=0>
<label for=”r0″ id=”Answer0″ onClick=”Check(0)” >Answer 0</label><br>
</div>
<div>
<INPUT type=radio value=1 name=r1 id=r1>
<label for=”r1″ id=”Answer1″ onClick=”Check(1)”>Answer 0</label><br>
</div>
<div>
<INPUT type=radio value=2 name=r1 id=r2>
<label for=”r2″ id=”Answer2″ onClick=”Check(2)”>Answer 0</label><br>
</div>
<div>
<INPUT type=radio value=3 name=r1 id=r3>
<label for=”r3″ id=”Answer3″ onClick=”Check(3)”>Answer 0</label><br>
</div>
<br>
<br>
</div></TD>
</TR>
</TBODY>
</TABLE>
<br>
</FORM>

[/CODE]

The Javascript bit.

[CODE]
<script language=’javascript’ type=’text/javascript’>

var QuestionNumber=0;

function CreateArray (NumOfRows, NumOfCols )
// Function to create a 2D Array.
{
var k= new Array (NumOfRows );
for (i=0; i<k.length; ++i )
k[i]=new Array (NumOfCols);

return k;
}

function Check(pressed)
{
var buttonValue = 9;
QArray[QuestionNumber][6]=pressed;
QuestionNumber++;
DisplayQuestion(QuestionNumber);
}

[/CODE]

P.s. Sorry about the variable inconsistencies.

Thanks for your help.

Jason.

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@cgishackJan 06.2008 — what about wrapping the radio button inside the <label>

<i>
</i>&lt;label for="r1" id="Answer1" onClick="Test()"&gt;&lt;input name="" type="radio" value="" /&gt;Answer 0&lt;/label&gt;
Copy linkTweet thisAlerts:
@ZeroKilledJan 06.2008 — the script is incomplete. there is no much we, or at least I, can say about the problem. if you think on the functional way, you have to attach the handler that pass to the next question on each input, or use a more advanced event model. however, the [B]Check[/B] handler use object that aren't defined on your script. can you post your complete script?
Copy linkTweet thisAlerts:
@RetroFiestaauthorJan 06.2008 — Thanks for the reply CGIShack.

That worked ( to a point ).

It worked for what I asked for, but stopped the rest of the script changing the text on the radio buttons.

I did however find that THIS worked.
<i>
</i>
<i> </i> &lt;div&gt;
<i> </i> &lt;label for="r0" id="Answer0" &gt;Answer 0&lt;input name="r1" type="radio" onClick="Check(0)" id=r0 &gt;&lt;/label&gt;&lt;br&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;div&gt;
<i> </i> &lt;label for="r1" id="Answer1" &gt;Answer 1&lt;input name="r1" type="radio" onClick="Check(1)" id=r1 &gt;&lt;/label&gt;&lt;br&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;div&gt;
<i> </i> &lt;label for="r2" id="Answer2" &gt;Answer 2&lt;input name="r1" type="radio" onClick="Check(2)" id=r2 &gt;&lt;/label&gt;&lt;br&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;div&gt;
<i> </i> &lt;label for="r3" id="Answer3" &gt;Answer 3&lt;input name="r1" type="radio" onClick="Check(3)" id=r3 &gt;&lt;/label&gt;&lt;br&gt;
<i> </i> &lt;/div&gt;


That puts the label up front.

And in that, puts the text infront of the radio button. So the button is behinde the text instead of infront of it. Not a 'major' deal. But it'd be nice to have it in front as you'd expect to find it.


ZeroKilled..

The DisplayQuestion function in itself only pulls details from the array and uses getElementById to replace the default text ( "Answer0", "Answer1" etc.. ) with the question text and answer text from the array. It is not part of the problem, hence why I didn't include it as to help make the problem easier to spot in my code.

It's here ( below ) anyway though..

<i>
</i>function DisplayQuestion(i)
// Display Question &amp; Possible Answers.
{

<i> </i>document.getElementById('QuesNo').childNodes[0].nodeValue="Question: "+ ( QuestionNumber+1 ) +" of 20";

<i> </i>document.getElementById('Question').childNodes[0].nodeValue=QArray[i][0];

<i> </i>document.getElementById('Answer0').firstChild.nodeValue=QArray[i][1];
<i> </i>document.getElementById('Answer1').firstChild.nodeValue=QArray[i][2];
<i> </i>document.getElementById('Answer2').firstChild.nodeValue=QArray[i][3];
<i> </i>document.getElementById('Answer3').firstChild.nodeValue=QArray[i][4];
}



Jason.
Copy linkTweet thisAlerts:
@RetroFiestaauthorJan 07.2008 — ..... Realising that I don't actualy 'need' the radio buttons..

I might loose them altogether and replace them with an

<i>
</i>&lt;a href="javascript:Check(0)" id="Answer0"&gt;Text here.&lt;/a&gt;


Get around it that way.

Cheers,

Jason.
×

Success!

Help @RetroFiesta spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...