Javascript using div

[FatJackSprat]

I am using javascript to show lines of text in table rows based on the user's answers. Each question also uses radio buttons or a textbox with an ok button. Each selection of a radio button or the ok button determines which row should be shown next

"1) Do you want any oranges? (radio) Y/N
2) How many oranges? (textbox) OK
3) Do you want ripe or unripe? (radio) R/U
4) Do you want any apples? (radio) Y/N
5) How many apples? (textbox) OK
6) Do you want ripe or unripe? (radio) R/U"

When the page is loaded only #1 is shown. If Y is chosen, #2 is shown and when OK is used #3 is shown. If N is chosen to #1 then #4 is shown, but it looks like this:

"1) Do you want any oranges? Y/N


4) Do you want any apples? Y/N"

How can I get #4 to appear directly beneath #1?

Using a variable at each div that is assigned the text of the appropriate question will work:

"1) Do you want any oranges? Y/N
2) 'question_two.value'
3) 'question_three.value'"

How do I get radio buttons, textboxes, and buttons to work in this scenario?

Thanks for any help.

 

[kamper]

Put them in a div?

 

[FatJackSprat]

I have each of them in a div right now. The problem is that when the content of a div is not shown, the div that is shown does not appear directly beneath the last shown div. Instead there are blank spaces where the hidden divs are.

I need a way to get rid of those blank spaces.

Thanks.

 

[Snapster]

Use document.getElementById('div').style.display = ''; / 'none';

insead of document.getElementById('div').style.visability='visable'; / 'hidden';

 

[fs5]

document.getElementById('div').style.display = 'none'; // hides divs
document.getElementById('div').style.display = ''; // restores div