My personal project (not college related) is to program a Multiple Choice Quiz web page. I am using Visual Studio 2010 ASP.net to perform this task. My dilemma is that I cannot, for the life of me, figure out how to change the (text) in my radio buttons labels upon button click. I have three Radio Buttons for the User to choose the correct answer from and have been successful (thanks to a moderator in a forum) in changing the text in the first Radio Button but cannot get the other two to change text. I have, unsuccessfully, tried every angle I could possibly imagine to tweak the code (for hours and hours - day after day - although I must admit I enjoyed the challenge) and that is why I am here. Can anyone assist me please.
This is what I have:
<!DOCTYPE html PUBLIC "">
<html xmlns="">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple Choice Quiz</title>
/*** Begin Style the Header ***/
/*** End Style the Header ***/
/*** Begin Style the Top Nav Bar ***/
/*** End Style the Top Nav Bar ***/
/*** Begin Image with Transparent Text ***/
/*** End Image with Transparent Text***/
</head>
<body runat="server" id="Body1">
<form id="Form1" method="post" runat="server">
<!--*** Begin Header Here***-->
<!--*** End Header Here***-->
<!--*** Begin Navigation Here***-->
<!--*** End Navigation Here***-->
<!--*** Begin Image With Transparent Text Insert Here***-->
<!--*** End Image With Transparent Text Insert Here***-->
<div class="container">
<img src="Images/forest.jpg" alt="forest" style="width:100%;">
<div class="content">
<h1 id = "queue" style = "font-size: 15px; font-family: 'Segoe UI'">Question Queue</h1>
<h2 id = "question" style = "font-size: 20px; font-family: 'Charm'">Question Presented Here!</h2>
<!--**** BEGIN CODE FOR RADIO BUTTONS ****-->
<asp:RadioButtonList id="RadioButtonList1" runat="server">
<asp:listitem Value="1">Item 1</asp:listitem>
<asp:listitem Value="2">Item 2</asp:listitem>
<asp:listitem Value="3">Item 3</asp:listitem>
</asp:RadioButtonList>
<!--**** END CODE FOR RADIO BUTTONS ****-->
<!--**** BEGIN CODE FOR OTHER BUTTONS ****-->
<input type="button" onclick="JavaScript: buttonOnClick(0);" value="Change Radio Button #1 Text">
<br />
<asp:Button ID="Button1" runat="server" Text="Start Quiz" OnClientClick="return Click()" Visible="True" />
<!--**** END CODE FOR OTHER BUTTONS ****-->
</div>
<script type="text/javascript">
function buttonOnClick(radioButtonNumber) {
var elementRef = document.getElementById('<%= RadioButtonList1.ClientID %>');
var radioButtonListArray = elementRef.getElementsByTagName('input');
for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (i == radioButtonNumber) {
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
labelArray[0].innerHTML = 'CHANGED TEXT';
break;
}
}
}
}
</script>
</div>
</form>
</body>
</html>