PDA

Click to See Complete Forum and Search --> : Text replacement (newb, sorry!)

leaded
09-29-2003, 06:20 PM
I'm sorry but I want to start out by saying I'm a huge newb. The only JavaScript I've done was some basic stuff my senior year of high school, which was almost 3 years ago.

One of the simple things I did was have and image slideshow thing where if you click a link the img changes.

I want to do something similiar but I'm having a tough time because it's text.

I have an array (which I'm postive works) with 4 variables set by the array, with each variable containing a sentence or two.

When the page loads I've got it so it loads to the first array variable, so something like

document.write(text[0])
(*I might be forgetting apotrophies or something, I'm writing during a class*)

and it works.

What I want to happen, is if you click on a link on the page, it turns into

document.write(text[1])

You get the idea I hope.

On the exercise I did in high school I had it so in the 'a' HTML tag's onmouseclick ran a function that changed the name of the image to what I wanted it to be.

Well, with this, I can't change the 'p' HTML tag, or can I?

Basically I'm stuck, can't do it, and I'm a huge newb so I don't know how.

If you'd like me to copy and paste my current code, please let me know and I'll do it the next time I hope on my computer.

Thanks in advance for the help!
pyro
09-29-2003, 08:56 PM
Is something like this what you are looking for?

<script type="text/javascript">
i = 0;
text = new Array("fee","fie", "fo", "fum");
function showNext() {
document.getElementById("text").innerHTML = text[i];
i < text.length-1 ? i++ : i=0;
}
</script>
</head>
<body>
<a href="#" onclick="showNext(); return false;">Next</a>

<div id="text"></div>
leaded
09-29-2003, 10:26 PM
I think so!

I didn't even think about playing around with the div tag... shoot, you're good.

I'll try it out and report back! Thanks a bunch!
pyro
09-29-2003, 10:28 PM
I was happy to help, as always... :)
leaded
09-29-2003, 11:08 PM
Here's what I ended up doing...
Maybe this will make my reasoning I tried to explain in my original post more clear.

For whatever reason it won't display all of it when I Preview or Submit, so I'll attach it in the next post.
leaded
09-29-2003, 11:13 PM
...
ZooTek
09-29-2003, 11:26 PM
you were missing some ; and the href="#" that follows the <a tag.


<head>
<script>
<!--
var content=new Array();
content[0]='html stuff 1';
content[1]='html stuff 2';
content[2]='html stuff 3';
content[3]='html stuff 4';

i=0;

function changeText(i){
document.getElementById("text").innerHTML = content[i];
}
//-->
</script>
</head>

<body onLoad="changeText(0)">

<a href="#" onClick="changeText(0)">link 1</a>
<a href="#" onClick="changeText(1)">link 2</a>
<a href="#" onClick="changeText(2)">link 3</a>
<a href="#" onClick="changeText(3)">link 4</a>

<div id="text"></div>
pyro
09-30-2003, 07:02 AM
The semicolons are optional in JavaScript (though in my opinion, it's good practice to have them in there), however, some other things that were left out are not (such as a DOCTYPE, Character-type, script type, etc. I took the liberty of fixing up your code (I also added return false; to the end of each onclick, which will keep it from running the href -- in our case, a blank anchor)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
var content=new Array();
content[0]='html stuff 1';
content[1]='html stuff 2';
content[2]='html stuff 3';
content[3]='html stuff 4';

i=0;

function changeText(i){
document.getElementById("text").innerHTML = content[i];
}
//-->
</script>
</head>

<body onload="changeText(0)">
<p><a href="#" onClick="changeText(0); return false;">link 1</a> |
<a href="#" onClick="changeText(1); return false;">link 2</a> |
<a onClick="changeText(2); return false;">link 3</a> |
<a onClick="changeText(3); return false;">link 4</a></p>

<div id="text"></div>

</body>
</html>