PDA

View Full Version : Recursive onclick issue


SensiStar13
10-15-2009, 07:56 PM
I am creating an interactive help system that will ask some questions of the user, and based on their response via a radio button will then ask another series of questions until the solution is found.

I have been successful at changing the questions when a particular radioButton is selected but my main problem is changing the button.onclick value to a different function without it immediately executing the new function. Its almost as if I change the onclick value and it immediately recognizes that its in that event and then goes through with the new function that should be waiting on another click.

I believe the root of my problem is that I am trying to change my onclick value while inside of a function that was triggered by an onclick event.

Does anyone have any suggestions on how to change my onclick value without it immediately executing it. Or is there a better way to implement this that I'm not aware of.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript Tester</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
<textarea name="action" id="action" cols="50" rows="3"></textarea><br />
<textarea name="question" id="question" cols="50" rows="3"></textarea>
<table width="445" border="1">
<tr>
<th width="41" scope="row"><label>
<input type="radio" name="radio" id="button1" value="button1" onclick="scenario1()" />
</label></th>
<td width="388"><label>
<textarea name="area1" id="area1" cols="50" rows="3"></textarea>
</label></td>
</tr>
<tr>
<th scope="row"><label>
<input type="radio" name="radio" id="button2" value="button2" onclick="scenario1()" />
</label></th>
<td><label>
<textarea name="area2" id="area2" cols="50" rows="3"></textarea>
</label></td>
</tr>
<tr>
<th scope="row"><label>
<input type="radio" name="radio" id="button3" value="button3" />
</label></th>
<td><label>
<textarea name="area3" id="area3" cols="50" rows="3"></textarea>
</label></td>
</tr>
</table>
</form>
</body>

<script type="text/javascript">
var a1 = document.getElementById("area1");
var a2 = document.getElementById("area2");
var a3 = document.getElementById("area3");
var b1 = document.getElementById("button1");
var b2 = document.getElementById("button2");
var b3 = document.getElementById("button3");
var action = document.getElementById("action");
var question = document.getElementById("question");

action.value = "You are not getting any engine RPM";
question.value = "Which scenario accuratley depicts your problem";
a1.value = "Displays on recorded logfile but not on LCD";
a2.value = "Engine RPM displays on LCD but not a recorded logfile";
a3.value = "No engine RPM on graph or LCD";

function scenario1() {
action.value = "Hit the channel button on the LCD until Engine is displayed in the center";
question.value = "Engine on test. Does it work correctly?";
a1.value = "Yes";
a2.value = "No";
a3.value = "";
b1.checked = false;
b1.onclick = done();
b2.onclick = scenario1a();
changeOnclick();
}

function done() {
action.value = "In the software, delete the 'Magneto' page from the LCD";
question.value = "You are now done";
a1.value = "";
a2.value = "";
a3.value = "";
}
function scenario1a() {
a1.value = "scenario 1 A";
}

</script>
</html>