JavaScript hide and then show elements in an array

Question

I have a simple array which has three elements. My elements are holding simple paragraph formatted text:

var quoteList = new Array(
"<p>One</p>", 
"<p>Two</p>", 
"<p>Three</p>"
);

This initialisation is done in my header. Now, in my body I print them by doing a simple document.write;

for(i=0; i<quoteList.length();i++)
{
    document.write(quoteList[i]);
}

This works, it prints out my three paragraph formatted text elements held in my array.

Now, I want to scroll through them when a, <a href> tag is clicked, but I'm having issues even getting some of my elements showing, and some hiding, see example;

quoteList[0].style.display="block";
quoteList[1].style.display="none";
quoteList[2].style.display="none";

This doesn't seem to be working. So, I have two issues:

Cycling through my array elements on mouseClick
I can't even get my quoteList elements hidden / visible.

jsfiddle.net/Sa7af

dfsq
– dfsq

2014-03-16 18:04:08 +00:00
Commented Mar 16, 2014 at 18:04 — dfsq
– dfsq, Commented Mar 16, 2014 at 18:04
Awww thanks dfsg. I shall keep that as a reference :)

Johnathan Brown
– Johnathan Brown

2014-03-16 18:06:20 +00:00
Commented Mar 16, 2014 at 18:06 — Johnathan Brown
– Johnathan Brown, Commented Mar 16, 2014 at 18:06

Gil · Accepted Answer · 2014-03-16 17:56:48Z

1

quoteList is an array of strings. After writing those strings to the document you create HTML elements and need to access them like that.

One solution is to add an id tag in the string phase: "<p id="p_0">One</p>" and then accessing it with document.getElementById("p_0").

Another option is creating the elements using document.createElement("p") and then appending them to the document. Because you've created the elements you can store them in an array.

A third option is retrieving all <P> tags using document.querySelector("p") and then iterating through them. Keep in mind that this will select all <P> elements in the document.

answered Mar 16, 2014 at 17:56

Gil

1,8441 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johnathan Brown Over a year ago

AHhh I can't believe I didn't think about adding a tag into my string phase. Should be able to work it all out now, cheers Gil

Collectives™ on Stack Overflow

JavaScript hide and then show elements in an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related