Menu
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.
[code]
<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>