Cycle a array on click javascript

Question

I have a problem,when cycle my array with cycle for;show only final element.Why?

MY JS:

var dom = new Array();


/*-----------------RIDDLES--------------*/
dom[0] = "How many cats..";
dom[1] = "How many dogs..";
dom[2] = "How many birds..";

function guess()
{
    for (var i = 0 ; i < dom.length ; i++)
    {
        document.getElementById("riddle").getElementsByTagName('p')[0].innerText = dom[i];
    }

}

MY HTML:

  <div id="riddle">
        <p>  </p>
    </div>


    <button  onclick="guess()">Next</button>

Why don't cycle all elements of arrays?

Do you want each element of the array to appear in turn, or all of them to appear at once? — Nzall
– Nzall, Commented Mar 31, 2014 at 8:43

dfsq · Accepted Answer · 2014-03-31 08:49:25Z

2

You can implement it like this for example:

var dom = new Array();

/*-----------------RIDDLES--------------*/
dom[0] = "How many cats..";
dom[1] = "How many dogs..";
dom[2] = "How many birds..";

// Initial pointer
var i = 0;

var p = document.getElementById("riddle").getElementsByTagName('p')[0];

function guess() {
    if (i < dom.length) {
        p.innerText = dom[i];
        i = i + 1;
    }
    else {
        alert('All solved!')
    }
}

// Display tyhe first one
guess();

Demo: http://jsfiddle.net/7wucF/1/

answered Mar 31, 2014 at 8:49

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

dfsq Over a year ago

@user3467605 Because on every click when guess executed, you were looping over the whole array of riddles setting the innerText of the paragraph. So the the each item was simply overwriting the previous one.

Marko · Accepted Answer · 2014-03-31 08:49:43Z

1

Better to not access DOM method inside loop, it will be written to the every time the loop iterates. And DOM manipulation is expensive in js.

var dom = [];

/*-----------------RIDDLES--------------*/ 
dom[0] = "How many cats.."; 
dom[1] = "How many dogs.."; 
dom[2] = "How many birds..";

function guess() {
    var arr = []; 

    for (var i = 0 ; i < dom.length ; i++)
    {
       arr.push(dom[i]);
    }

    document.getElementById("riddle").getElementsByTagName('p')[0].innerText

= arr.join('');
}

edited Mar 31, 2014 at 8:49

answered Mar 31, 2014 at 8:42

Marko

11.1k17 gold badges73 silver badges94 bronze badges

Comments

chris97ong · Accepted Answer · 2014-03-31 09:22:11Z

1

HTML:

<div id="riddle">
    <p>  </p>
</div>


<button id="nxt">Next</button>

Javascript:

var dom = ["How many cats..","How many dogs..","How many birds.."];
var index = -1;
document.getElementById("nxt").onclick= function() {
    // Prevent getting past length of array
    if((index + 1) >= dom.length) { return; }
    index++;
    document.getElementById("riddle").getElementsByTagName('p')[0].innerText = dom[index];
};

Fiddle.

edited Mar 31, 2014 at 9:22

answered Mar 31, 2014 at 8:42

chris97ong

7,0809 gold badges36 silver badges54 bronze badges

5 Comments

user3467605 Over a year ago

In this mode i show all elements,I would like to cycle the array element on click

chris97ong Over a year ago

@user3467605 View edit. In the new edit you don't need a for loop.

chris97ong Over a year ago

@user3467605 Apologies, there was an error and I had edited the post to make the code work. Set this as answer if it works :-)

Nzall Over a year ago

This will get an array overflow if you click again when it's on birds. If the index is 2, you need to set it to 0 instead of 3.

chris97ong Over a year ago

@Nate Kerkhofs Yes thanks for reminding me, edited the code already.

Xdevelop · Accepted Answer · 2014-03-31 09:10:29Z

I have tested you'r code and seems that is the onclick event which is not working good, just try to do it with addEventListener, like in that fiddle

Code:

var dom = new Array();
var i = 0;
/*-----------------RIDDLES--------------*/
dom[0] = "How many cats..";
dom[1] = "How many dogs..";
dom[2] = "How many birds..";

document.getElementById("b1").addEventListener("click",function(){
    var e = document.getElementById("riddle").getElementsByTagName('p')[0];
    e.innerHTML = dom[i];
    if(i>1)
        i=0
    else
        i++;
},false);

html:

<div id="riddle">
    <p></p>
</div>
<button  id="b1">Next</button>

Collectives™ on Stack Overflow

Cycle a array on click javascript

4 Answers 4

Demo: http://jsfiddle.net/7wucF/1/

1 Comment

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Demo: http://jsfiddle.net/7wucF/1/

1 Comment

Comments

5 Comments

Comments

Related