Insert items from an array into a div when clicking

Question

I have an array with predefined lines:

    var linesArr = ["asd", "dsa", "das"];

I have a div, which i created with JS and styled it with my CSS:

    var div = document.createElement("div");
    div.className = "storyArea";
    div.innerHTML = linesArr[0];

Right now i have that code that can animate the texts fadeIns and fadeOuts on click:

    $(div).click(function(){
    $(this).fadeOut(1000, function() {
       $(this).text("Random text").fadeIn(2000);
        });
    });

But it is not a cycle that can iterate through my array items, it will be showing the predefined text all the time.

I tried to write a cycle that can work through that, but got lost:

    $(div).click(function(){
    for (var i = 1; i < linesArr.length; i++) {
        $(div).fadeOut(1000, function() {
            $(this).html(linesArr[i].fadeIn(2000));
            });
        };
    });

That cycle is not working, i don't have any console errors, but the logic here is flawed. Can somebody help me?

Please click the `<>` and create a [mcve] – mplungjan Sep 13 '17 at 13:56 — mplungjan, Sep 13 '17 at 13:56

Niklesh Raut · Accepted Answer · 2017-09-13T14:11:32.030

2

Do you want like this

var linesArr = ["asd", "dsa", "das"];

var div = document.createElement("div");
    div.className = "storyArea";
    div.innerHTML = linesArr[0];
    document.body.appendChild(div);
    
    $(div).click(function(){
    //for (var i = 1; i < linesArr.length; i++) {
        $(div).fadeOut(1000, function() {
            index = linesArr.indexOf($(this).html()) + 1;
            $(this).html(linesArr[index % linesArr.length]);
            $("div").fadeIn(2000);
            });
        //};
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Sep 13 '17 at 14:11

answered Sep 13 '17 at 13:59

Niklesh Raut

34,013
16
75
109

Yes! But when i click the "asd", it should be swapped with "dsa", then with "das". With each click on the text it should display next array item. – Maxim Korotkov Sep 13 '17 at 14:02
@MaximKorotkov : I have updated my answer, check this. – Niklesh Raut Sep 13 '17 at 14:11
Thank you very much! I would have never made it myself =/ – Maxim Korotkov Sep 13 '17 at 14:14

score 1 · Answer 2 · answered Sep 13 '17 at 14:05

You can use a pointer (show in this case) to keep track of the current element being shown. Then on each click fade out the current and fade in the next.

I'm also using a module % to loop back to the first element when you reach the end.

var linesArr = ["asd", "dsa", "das"];
var show = 1;

var div = document.createElement("div");
div.className = "storyArea";
div.innerHTML = linesArr[0];

$(document.body).append(div);

$(div).click(function() {
  $(div).fadeOut(1000, function() {
    $(this).html(linesArr[show++ % linesArr.length]).fadeIn(2000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

gaetanoM · Answer 3 · 2017-09-13T14:23:12.117

If you need a cycle, you can use a loop in an IIFE:

 $('div').click(function () {
  (function loop(i) {
    $('div').html(linesArr[i]).fadeOut(1000, function () {
        $(this).html(linesArr[i]).fadeIn(2000);
        i++;
        if (i < linesArr.length) {
            loop(i);
        }
    });
  })(0);
});

var linesArr = ["asd", "dsa", "das"];
$('div').click(function () {
    (function loop(i) {
        $('div').html(linesArr[i]).fadeOut(1000, function () {
            $(this).html(linesArr[i]).fadeIn(2000);
            i++;
            if (i < linesArr.length) {
                loop(i);
            }
        });
    })(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>Click Me</div>

When the complete callback runs your i variable already reached the last value. In order to preserve the variable scope you can use IIFE

Insert items from an array into a div when clicking

3 Answers3