A question about swapping text

I'm trying to set up a series of questions, which would look basic

Page 1 of 1

1 Replies - 1565 Views - Last Post: 19 September 2006 - 05:10 PM

#1 Malkalypse   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 17-April 05

A question about swapping text

Posted 18 September 2006 - 03:38 PM

I'm trying to set up a series of questions, which would look basically like an unordered list. Then, upon clicking a box next to any of the questions, the answer would appear underneath the question. Clicking that same box a second time would cause the answer to disappear. It seems very simple, and I've tried using a couple of different text swapping functions, but for some reason I can't get the answer text to appear in the right places. The script seems to have a hard time keeping track of where things are supposed to go, and it's really irritating me. I need to find a solution ASAP. Thanks!

I'm probably going about things the wrong way, or making it much harder than it has to be, but after a bunch of attempts, I've gotten it to work with at least one..

<script type="text/javascript">

var buttonId;
var textId;

// Set up button array
var buttonData = new Array();
buttonData[1] = "<a href='java script: swapHelp(2,2)'><img src='square_brown.bmp'></a>";
buttonData[2] = "<a href='java script: swapHelp(1,1)'><img src='square_black.bmp'></a>";

buttonData[3] = "<a href='java script: swapButton(4,4)'><img src='square_black.bmp'></a>";
buttonData[4] = "<a href='java script: swapButton(3,3)'><img src='square_brown.bmp'></a>";

// Set up function to swap buttons
function swapButton(buttonId)
{
  document.getElementById("buttonInfo").innerHTML = buttonData[buttonId];
}

// Set up text array
var textData = new Array();
textData[1] = "";
textData[2] = "This is help text for question 1";
textData[3] = "";
textData[4] = "This is help text for question 2";
textData[5] = "";
textData[6] = "This is help text for question 3";
textData[7] = "";
textData[6] = "This is help text for question 4";

// Set up functions to swap text
function swapText(textId)
{
  document.getElementById("textInfo").innerHTML = textData[textId];
}

// Run swapButton and swapText
function swapHelp(textId, buttonId)
{
  swapButton(buttonId);
  swapText(textId);
}

</script>

</head>
<body>
	<table>	
	  <tr>	  
		<td>

<span id="buttonInfo">		  
<a href="java script: swapHelp(2,2)"><img src="square_brown.bmp"></a>
</span>
</td>
<td>
<span>
Question 1
</span>
</td>		
</tr>
<tr>
<td>
<span id="textInfo"></span>
</td>
</tr>
</table>

etc...



The problem comes in when I try to make the buttons and answer spaces into arrays.

<html>
<head>
<script type="text/javascript">

var buttonId;
var textId;
var placeId;

var textPlace = new Array();
  textPlace[0] = "0";
  textPlace[1] = "1";

function placeText(placeId)
{
}

function placeButton(placeId)
{
}  
  
// Set up button array
var buttonData = new Array();
  buttonData[0] = "<a href='java script: placeText(0); swapText(1); placeButton(0); swapButton(1)'>Square 0 (on)</a>",
  buttonData[1] = "<a href='java script: placeText(0); swapText(0); placeButton(0); swapButton(0)'>Square 0 (off again)</a>",

  buttonData[2] = "<a href='java script: swapButton(2,4,4)'>Square 2 (on)</a>",
  buttonData[3] = "<a href='java script: swapButton(2,3,3)'>Square 2 (off again)</a>",

// Set up function to swap buttons
function swapButton(buttonId)
{
  document.getElementById("buttonInfo" + (buttonId)).innerHTML = buttonData[buttonId];
}

// Set up text array
var textData = new Array();
  textData[0] = "This is help text for question 1";
  textData[1] = "1 empty space";
  textData[2] = "This is help text for question 2";
  textData[3] = "2 empty space";
  textData[4] = "This is help text for question 3";
  textData[5] = "";
  textData[6] = "This is help text for question 4";
  textData[7] = "";

// Set up functions to swap text
function swapText(textPlace)
{
  document.getElementById("textInfo" + (textPlace)).innerHTML = textData[textPlace];
}

/*
// Run swapButton and swapText
function swapHelp(placeData, textId, buttonId)
{
  placeData;
  swapButton(buttonId);
  swapText(textId);
}
*/

</script>

</head>
<body scroll="auto" bgcolor="FAFCFA">

<div class="paddingwrap">
  <div>
	<table width="100%">
	
	  <tr>	  
		<td><!--<img src="square_brown.bmp">-->

<span id="buttonInfo0">		  
<a href="java script: placeText(0); swapText(0); placeButton(0); swapButton(0);">Square 1 (off)</a>
</span>
</td>
<td>
<span>
Question 1<br />
</span>
</td>		
</tr>
<tr>
<td>
<span id="textInfo0">Text 1 (empty space)</span>
</td>
</tr>
<tr>	  
<td>
<span id="buttonInfo2">
<a href="java script: swapHelp(2,4,4);"><img src="square_brown.bmp"></a>
</span>
</td>
<td>
<span>Question 2
</span>
</td>
</tr>
</table>

etc...



As you can probably see, I've chased this around in circles and it's driving me nuts. PLEASE HELP!

Is This A Good Question/Topic? 0
  • +

Replies To: A question about swapping text

#2 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: A question about swapping text

Posted 19 September 2006 - 05:10 PM

What's so hard about this?

CSS:
* {margin: 0;}
html {padding: 20px;}
a {cursor: pointer; color: red; text-decoration: underline;}
dl * {padding: 10px;}
dt {background-color: #eee;}
dd {display: none; background-color: #ddd;}


Javascript\:
function toggle(toggle, target) {
  var answer = document.getElementById(target);
  if (answer.style.display != "block") {
	answer.style.display = "block";
	toggle.firstChild.data = "hide answer";
	}
  else {
	answer.style.display = "none";
	toggle.firstChild.data = "show answer";
	}
  }


HTML:
<dl>
  <dt>1. What color is the sky? <a onclick="toggle(this,'answer1');">show answer</a></dt>
  <dd id="answer1">It's usually blue.</dd>
</dl>


if you need more help, you should post a complete, functional copy of an HTML document containing your code, not just part of one. This is the reason I chose to write from scratch instead of trying to repair your existing code. Since your script relies on an image, it makes sense to post that or a link to it as well, especially since you haven't correctly specified fallbacks for the missing images in your code.

[mod edit] you should be able to edit posts. You should, but I don't really know. Also, please use code tags! //Thanks! hotsnoj
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1