How to randomize Text with append and timer?-CodePudding

I am trying to randomize text with a timer.

I created an object with all the text I would like to have displayed and randmomized.

const textObj = {
    textOne:"Finish every day and be done with it.",
    textTwo:"The chief beauty about time is that you cannot waste it in advance.",
    textThree:"Today is a new day. Don't let your history interfere with your destiny!",
    textFour:"Each new day is a blank page in the diary of your life.",
    textFive:"All great beginnings start in the dark, when the moon greets you to a new day at midnight.",
    textSix:"All great beginnings start in the dark, when the moon greets you to a new day at midnight.",
    textSeven:"A new day: Be open enough to see opportunities. Be wise enough to be grateful.",
    textEight:"Today is the first day of the rest of your life.",
    textNine:"Participate in your dreams today.",
    textTen:"There are unlimited opportunities available with this new day."
};

I got the the HTML element

let textPlacehodler = document.querySelector(".head");

I created a function for the randomizing

function generatedText(textObj){

for(let i = 0; i < textObj.length - 1; i  ){
    let random = i   Math.floor(Math.random() * (textObj.length - i));

    let temp = textObj[random];
    textObj[random] = textObj[i]
    textObj[i] = temp;
}

return textObj
}

Here is the HTML element I am using

<div ></div>

The outcome should be:

The texts needs to randomaly generate with a timer interval in between each text and it needs to be attached to the <div ></div>

CodePudding user response：

This is probably not the best solution, but hopefully it will guide you in the right direction.

let textPlaceholder = document.querySelector(".head");
function generatedText(obj){
    const keys = Object.keys(obj)
    return obj[keys[ keys.length * Math.random() << 0]];
}

generatedText(textObj);

const textInterval = window.setInterval(function(){
textPlaceholder.insertAdjacentHTML("afterbegin", generatedText(textObj)); 
}, 5000)

const textIntervalRemove = window.setInterval(function(){
textPlaceholder.innerHTML='';
}, 4999)

I simplified your randomize function, and then you call that with a setInterval function. But then you need to remove the text again before showing the next quote, which is why I have the second function at 4999.

CodePudding user response：

One method would be to remove a quote from the source object when it is displayed so that on the next iteration of the loop the pool of quotes is reduced until there are none left. Alternatively an array to store selected quotes could be maintained until all quotes have been added to that array etc. The following simply deletes a quote from the source object as the loop/interval progresses

const _INTERVAL=1;
const _APPEND=false;

const textObj = {
    textOne:"Finish every day and be done with it.",
    textTwo:"The chief beauty about time is that you cannot waste it in advance.",
    textThree:"Today is a new day. Don't let your history interfere with your destiny!",
    textFour:"Each new day is a blank page in the diary of your life.",
    textFive:"All great beginnings start in the dark, when the moon greets you to a new day at midnight.",
    textSix:"All great beginnings start in the dark, when the moon greets you to a new day at midnight.",
    textSeven:"A new day: Be open enough to see opportunities. Be wise enough to be grateful.",
    textEight:"Today is the first day of the rest of your life.",
    textNine:"Participate in your dreams today.",
    textTen:"There are unlimited opportunities available with this new day."
};


const mt_rand=function(a,b){
  return Math.floor( Math.random() * ( b - a   1 )   a );
};

const item=(str)=>{
  let item=document.createElement('div');
      item.textContent=str;
  return item;
};

const findquote=()=>{
  let keys=Object.keys( textObj );
  let key=keys[ mt_rand( 0, keys.length-1 ) ]
  let str=textObj[ key ];
  delete textObj[ key ];
  return str;
};



let tpl = document.querySelector(".head");

let tx=setInterval( ()=>{
  let selection=findquote();
  
  if( _APPEND ) tpl.appendChild( item( selection ) );
  else tpl.textContent=selection;
  
  if( Object.keys( textObj )==0 ){
    clearInterval( tx );
    console.log('Finished')
  }
}, _INTERVAL * 1000 );

<div ></div>