How can i use these JS array data from div class instead of array

Question

Here are in this script there are three questions as JS array, But i want to use div class content instead of js array. here are my js animation with "Next" button that animate next to next array one by one, But i want that these divs with quiz class must be like that array, one by one animate.

<div class="quiz">The color of the sky is...?</div>
<div class="quiz">Paper comes from...?</div>
<div class="quiz">How many hours in a day?</div>

for example: here are js array structure is like that:

questions = [
        "The color of the sky is...?",
      "Paper comes from...?",  
      "How many hours in a day?"];

but i want to use this div class content instead of array format

<div class="quiz">The color of the sky is...?</div>
<div class="quiz">Paper comes from...?</div>
<div class="quiz">How many hours in a day?</div>

and for that i tried this code but it isn't working here like that

var questions = document.getElementsByClassName("quiz");
for(i = 0; i < pageDivs.length;i++)
{

So plz any member of lovely stackoverflow community can help me plz make it solve.

Thanks in advance for help.

MY complete code is here:

var question = 0,

  questions = [
        "The color of the sky is...?",
      "Paper comes from...?",  
      "How many hours in a day?"];
    
var anim,
    targets;

function prepQuestion() {
  $("#questions").text(questions[question]);
      
  var textWrappers = document.querySelectorAll('#questions');
  textWrappers.forEach(textWrapper => {
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
      return `<span class="word">` +
        m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
        `</span>`;
    });
  });
  
  targets = Array.from(document.querySelectorAll('#questions .letter'));

  anim = anime.timeline()
    .add({
      targets: targets,
      scale: [3, 1],
      scaleY: [1.5, 1],
      opacity: [0, 1],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 400,
      delay: (el, i) => 60 * i
    });
}

// init
prepQuestion();

function next() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1,3],
      scaleY: [1,1.5],
      opacity: [1,0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 100,
      delay: (el, i) => 30 * i
    });
        
  anim.complete = () => {
    if (question == questions.length - 1) { question = 0; } // reset question
    else { question++; }
    
    prepQuestion();
  };     
}

#questions {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

#questions .letter {
  display: inline-block;
  line-height: 1em;
}

.word {
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="questions"></div>
<br>
<Button id="rc" onclick="next()">Next</Button>

i Love stackoverflow community member, Plz make it solve as fast as, Thanks in advance.

this is really good question

Rakesh Suthar
– Rakesh Suthar

2020-12-03 11:53:08 +00:00
Commented Dec 3, 2020 at 11:53 — Rakesh Suthar
– Rakesh Suthar, Commented Dec 3, 2020 at 11:53

yunzen · Accepted Answer · 2020-12-03 11:56:08Z

1

Use

var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {
  carry.push(item.textContent.trim())
  return carry;
}, []);

var question = 0;

//var  questions = [
//    "The color of the sky is...?",
//    "Paper comes from...?",
//    "How many hours in a day?"
//  ];
var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {
  carry.push(item.textContent.trim())
  return carry;
}, []);

var anim;
var targets;

function prepQuestion() {
  $("#questions").text(questions[question]);

  var textWrappers = document.querySelectorAll('#questions');
  textWrappers.forEach(textWrapper => {
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
      return `<span class="word">` +
        m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
        `</span>`;
    });
  });

  targets = Array.from(document.querySelectorAll('#questions .letter'));

  anim = anime.timeline()
    .add({
      targets: targets,
      scale: [3, 1],
      scaleY: [1.5, 1],
      opacity: [0, 1],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 400,
      delay: (el, i) => 60 * i
    });
}

// init
prepQuestion();

function next() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 100,
      delay: (el, i) => 30 * i
    });

  anim.complete = () => {
    if (question == questions.length - 1) {
      question = 0;
    } // reset question
    else {
      question++;
    }

    prepQuestion();
  };
}

#questions {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

#questions .letter {
  display: inline-block;
  line-height: 1em;
}

.word {
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="quiz">The color of the sky is...?</div>
<div class="quiz">Paper comes from...?</div>
<div class="quiz">How many hours in a day?</div>
<div class="quiz">A Giraffe is a fish?</div>

<div id="questions"></div>
<br>
<Button id="rc" onclick="next()">Next</Button>

answered Dec 3, 2020 at 11:56

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

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

3 Comments

RR Suthar Over a year ago

One query pz that any idea that i can display none these lines The color of the sky is...? Paper comes from...? How many hours in a day? A Giraffe is a fish? from the page means without animation free lines that is showing, how can i hide that.

yunzen Over a year ago

@RRSuthar Please rephrase your question. I did not understand you issue

RR Suthar Over a year ago

Hello yunzen, Can you answer my this question also stackoverflow.com/questions/65127751/… it will be pleasure for me, thanks in advance Love You :)

Collectives™ on Stack Overflow

How can i use these JS array data from div class instead of array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related