Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can I iterate using a For loop in an onclick event?

Status
Not open for further replies.
HowdeeDoodee

HowdeeDoodee

Technical User
Mar 14, 2005
61
US
How can I iterate through the variables below and display only one sentence on the screen at a time, using a button onclick event to trigger the display of the sentence. As the code is written now, all four sentences display on the screen at one time and there is no button.

Thank you in advance for any replies.

I am a total novice.


<script type="text/javascript">
//any number of elements can be assigned to an array

var sentence = new Array()
sentence[0] = "Saab is driven by smart people."
sentence[1] = "Volvo is an automobile."
sentence[2] = "BMW is for the rich and famous."
sentence[3] = "Ford is for the economy minded."


for (i=0;i<sentence.length;i++)
{
document.write(sentence + "<br />")
}

 
Sort by date Sort by votes
don't use document.write - that only works as the page is being rendered, and will be of no help to you when clicking a button. instead, create a small function, similar to:

Code: 
var sentence = new Array()
sentence[0] = "Saab is driven by smart people."
sentence[1] = "Volvo is an automobile."
sentence[2] = "BMW is for the rich and famous."
sentence[3] = "Ford is for the economy minded."

var intSentenceIndex = 0;


function writeThing() {
    if ( intSentenceIndex == sentence.length ) intSentenceIndex = 0;
    document.getElementById('mySentence').innerHTML = sentence[intSentenceIndex];
    intSentenceIndex++;
}

your button would then look something like:

Code: 
<button onclick="writeThing();">Click Me</button>



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thank you for the above posts. The code is producing an error but I do not know how to troubleshoot or fix the issue. Can you look at the code and try to determine the cause of the issue?
 
Upvote 0 Downvote
sorry, i forgot one part.

you need an empty div (or other tag, with an id of "mySentence" (or you can change it, just be sure to change it in the javascript as well)).

Code: 
<div id="mySentence"></div>



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thank you for the post. I pasted in your div id tag exactly as you wrote the tag. First, I pasted the div id in above the script tag, below the script tag, and inside the tags. In every case I still get an error. I am using FP so all I get is the standard error screen with no way to track down the source of the error. Is there any way the issue can be determined and fixed? Thank you again for the posts.
 
Upvote 0 Downvote
the code works exactly as i described it. here's a complete, working example:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script type="text/javascript"><!--

var sentence = new Array()
sentence[0] = "Saab is driven by smart people."
sentence[1] = "Volvo is an automobile."
sentence[2] = "BMW is for the rich and famous."
sentence[3] = "Ford is for the economy minded."

var intSentenceIndex = 0;


function writeThing() {
    if ( intSentenceIndex == sentence.length ) intSentenceIndex = 0;
    document.getElementById('mySentence').innerHTML = sentence[intSentenceIndex];
    intSentenceIndex++;
}

//--></script>
</head>

<body>

<button onclick="writeThing();">Click Me</button>
<div id="mySentence"></div>

</body>
</html>



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Excellent, cLFlaVA. Yes, the code works. Thank you very much.

Keywords: javascript, iterate through a list with javascript, display a list item by item
 
Upvote 0 Downvote
cLFlaVA, thank you again for the help. Is is possible to add a second button and make the iteration go backward in the list instead of forward. Thank you again.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
548
Rayj0000
Rayj0000
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
159
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
668
xwb
xwb
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
174
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top