Javascript or jquery, how can I show text from an array and change the text to the next piece of text in an array when a button is pressed?

Question

I have an array with 13 items, all of it is text. I can show text from the array by using.

document.write(arrayname["0"]);

however I would like to have users click a button and fade out the current array item and load in the next array item. I wanted to have users not be able to view an array item less than 0 and more than 13 since that would cause an error.

I tried this but could not get it to work.

Thank you in advance.

<script type=text/javascript>

 var stuff=['item', 'stuff', 'thingamajig'];
 var counter=0;
 function goRight(){
    if(counter===13){
      counter=13;
    } else 
     { counter=counter+1 }
 }

 document.write(stuff[counter]);
</script>

 <img src="left.png"><img onclick="goRight(); src="right.png>

You say you “could not get it to work”, what happens when you try? — Buck Doyle, May 16 '14 at 05:48
Your `document.write(stuff[counter]);` in your script tag probably isn't helping, that's pushing a random item onto your page and overwriting everything. — Evan Knowles, May 16 '14 at 05:50

score 1 · Answer 1 · answered May 16 '14 at 05:54

Your largest source of confusion is probably due to not actually writing anything in your function. Try something like this:

<script type=text/javascript>
  var stuff=['item', 'stuff', 'thingamajig'];
  var count = 0;

  function goRight() {

    if (count > stuff.length - 1)
      count = 0;

    document.write(stuff[count++]);

  }

  document.write(stuff[count]);
</script>


<img src="left.png"><img onclick="goRight(); src="right.png>

Balachandran · Answer 2 · 2014-05-16T06:06:12.467

0

Fiddle Demo

Try this

var stuff=['item', 'stuff', 'thingamajig'];
     var counter=0;

     function goRight(){
        document.write(stuff[counter]);
         counter++;
         if(counter===13){  // if You want 13 th element you check to 14
         counter=0;
         }
      }

OR

var stuff=['item', 'stuff', 'thingamajig'];
     var counter=-1;
     goRight();

function goRight(){

         if(counter===13){
         counter=0;
         }else{
         counter++;
         }
        }      

   document.write(stuff[counter]);

edited May 16 '14 at 06:06

answered May 16 '14 at 05:49

Balachandran

9,277
1
13
25

I tried something different, I tried doing this but still nothing. var thecount=0; $("#next").click(function(){ thecount++; }); – user2684521 May 16 '14 at 06:31
@user2684521 check in fiddle http://jsfiddle.net/5DMDh/4/ mistake is spelling testis array – Balachandran May 16 '14 at 12:50

score 0 · Answer 3 · edited May 23 '17 at 12:31

Try something like this HTML

<span id='dynamicText'>item</span>
<button type='button' onclick='goRight()'>Click</button>

SCRIPT

var stuff = ['item', 'stuff', 'thingamajig'];
var counter = 1;
function goRight() {
 if(counter>= stuff.length)
    counter=0;
 document.getElementById('dynamicText').innerHTML=stuff[counter];
 counter++;
}

JSFiddle Demo

You might want to read Why Using document.write is a considered a bad practive

Javascript or jquery, how can I show text from an array and change the text to the next piece of text in an array when a button is pressed?

3 Answers3