A
Andrea
Hi there -
I'm hoping someone can help me; I've been struggling with this for a
few days!
I have a webpage that is comprised of many forms containing questions.
As the user answers one of the questions, that form is hidden and the
next is displayed. Also, as the user answers each question a "count"
variable is updated based on their response. I would like the question
to show up on the left side and the answer to show up in the upper
right hand corner. But, when I try to get the count to display using
document.write, it overwrites the existing form on the left.
I've pasted a simplified version of the code below (with comments).
I appreciate all help - I'm at a loss!
THANKS,
Andrea
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
#all_forms form {display: none; border: 1px solid black; width: 80%;
padding: 5px; background-color: gray;}
#all_forms form button {padding: 5px; margin: 5px;}
#currency {position: absolute; left: 80%; top: 10px; display: none;
background-color: #ECF5E2; }
</style>
<script type="text/javascript" language="javascript">
var count=0;
function calculate_priv(form_id, num_to_add, last)
{
if (last=="no") //not on last question, progress to next
{
count=count+num_to_add;
ques_num=form_id.charAt(form_id.length-1); //get the number of the
question
document.getElementById(form_id).style.display = "none"; //hide current
question
ques_num=parseInt(ques_num); //convert string to number
ques_num = ques_num+1;
form_id='ques' + ques_num;
document.getElementById(form_id).style.display = "block"; //display the
next form
}
else //on last question
{
count=count+num_to_add;
document.getElementById(form_id).style.display = "none"; //hide current
question
document.write("<p>Your final balance in the piggy bank is $" + count +
".</p>");
}
}
function write_currency()
{
//document.write("<div id='currency'>Balance in the Piggy Bank: $"
+count+ "</div>"); IF I TRY TO WRITE THE HTML HERE, IT OVERWRITES THE
FORM AND ONLY THE AMOUNT SHOWS.
document.getElementById("currency").style.display = "block";
}
</script>
</head>
<body>
<div id="introduction">It can be useful to think of this in terms of
currency. The following set of questions will allow you to fill or take
away from your
"piggy bank." You should answer the questions honestly based on your
own experiences. At the end you will find out the amount of currency in
your "bank."<br />
<form>
<button onclick="javascript: write_currency();
document.getElementById('ques1').style.display='block';
document.getElementById('introduction').style.display='none';">Calculate
my Currency</button>
</form>
</div>
<div id="currency">
<strong>Balance in the Piggy Bank: </strong>Needs to update with the
count variable<!--THIS IS WHERE I WOULD LIKE THE VARIABLE "COUNT" TO BE
REFRESHED EACH TIME ONE FORM WAS HIDDEN AND ANOTHER WAS DISPLAYED."-->
</div>
<div id="all_forms">
<form id="ques1">
<p>Question 1?</p>
<button onclick="calculate_priv(this.form.id, 1, 'no')">Add $1</button>
<button onclick="calculate_priv(this.form.id, -1, 'no')">Subtract
$1</button>
<button onclick="calculate_priv(this.form.id, 0, 'no')">Unsure-no
change</button>
</form>
<form id="ques2">
<p>Question 2?</p>
<button onclick="calculate_priv(this.form.id, 1, 'no')">Add $1</button>
<button onclick="calculate_priv(this.form.id, -1, 'no')">Subtract
$1</button>
<button onclick="calculate_priv(this.form.id, 0, 'no')">Unsure-no
change</button>
</form>
<form id="ques3">
<p>Question 3?</p>
<button onclick="calculate_priv(this.form.id, 1, 'yes')">Add
$1</button>
<button onclick="calculate_priv(this.form.id, -1, 'yes')">Subtract
$1</button>
<button onclick="calculate_priv(this.form.id, 0, 'yes')">Unsure-no
change</button>
</form>
</div>
</body>
</html>
I'm hoping someone can help me; I've been struggling with this for a
few days!
I have a webpage that is comprised of many forms containing questions.
As the user answers one of the questions, that form is hidden and the
next is displayed. Also, as the user answers each question a "count"
variable is updated based on their response. I would like the question
to show up on the left side and the answer to show up in the upper
right hand corner. But, when I try to get the count to display using
document.write, it overwrites the existing form on the left.
I've pasted a simplified version of the code below (with comments).
I appreciate all help - I'm at a loss!
THANKS,
Andrea
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
#all_forms form {display: none; border: 1px solid black; width: 80%;
padding: 5px; background-color: gray;}
#all_forms form button {padding: 5px; margin: 5px;}
#currency {position: absolute; left: 80%; top: 10px; display: none;
background-color: #ECF5E2; }
</style>
<script type="text/javascript" language="javascript">
var count=0;
function calculate_priv(form_id, num_to_add, last)
{
if (last=="no") //not on last question, progress to next
{
count=count+num_to_add;
ques_num=form_id.charAt(form_id.length-1); //get the number of the
question
document.getElementById(form_id).style.display = "none"; //hide current
question
ques_num=parseInt(ques_num); //convert string to number
ques_num = ques_num+1;
form_id='ques' + ques_num;
document.getElementById(form_id).style.display = "block"; //display the
next form
}
else //on last question
{
count=count+num_to_add;
document.getElementById(form_id).style.display = "none"; //hide current
question
document.write("<p>Your final balance in the piggy bank is $" + count +
".</p>");
}
}
function write_currency()
{
//document.write("<div id='currency'>Balance in the Piggy Bank: $"
+count+ "</div>"); IF I TRY TO WRITE THE HTML HERE, IT OVERWRITES THE
FORM AND ONLY THE AMOUNT SHOWS.
document.getElementById("currency").style.display = "block";
}
</script>
</head>
<body>
<div id="introduction">It can be useful to think of this in terms of
currency. The following set of questions will allow you to fill or take
away from your
"piggy bank." You should answer the questions honestly based on your
own experiences. At the end you will find out the amount of currency in
your "bank."<br />
<form>
<button onclick="javascript: write_currency();
document.getElementById('ques1').style.display='block';
document.getElementById('introduction').style.display='none';">Calculate
my Currency</button>
</form>
</div>
<div id="currency">
<strong>Balance in the Piggy Bank: </strong>Needs to update with the
count variable<!--THIS IS WHERE I WOULD LIKE THE VARIABLE "COUNT" TO BE
REFRESHED EACH TIME ONE FORM WAS HIDDEN AND ANOTHER WAS DISPLAYED."-->
</div>
<div id="all_forms">
<form id="ques1">
<p>Question 1?</p>
<button onclick="calculate_priv(this.form.id, 1, 'no')">Add $1</button>
<button onclick="calculate_priv(this.form.id, -1, 'no')">Subtract
$1</button>
<button onclick="calculate_priv(this.form.id, 0, 'no')">Unsure-no
change</button>
</form>
<form id="ques2">
<p>Question 2?</p>
<button onclick="calculate_priv(this.form.id, 1, 'no')">Add $1</button>
<button onclick="calculate_priv(this.form.id, -1, 'no')">Subtract
$1</button>
<button onclick="calculate_priv(this.form.id, 0, 'no')">Unsure-no
change</button>
</form>
<form id="ques3">
<p>Question 3?</p>
<button onclick="calculate_priv(this.form.id, 1, 'yes')">Add
$1</button>
<button onclick="calculate_priv(this.form.id, -1, 'yes')">Subtract
$1</button>
<button onclick="calculate_priv(this.form.id, 0, 'yes')">Unsure-no
change</button>
</form>
</div>
</body>
</html>