Getting a new rndInt on each click

Ask the community
,
10

@luke_semple Ok, I realized I forgot some stuff. And that it’s easier to add things to the code than explain where every piece goes

import { timeline } from 'wix-animations'

// ID: 7106D147D53400B9BB5AFFADBF985D6D


function randomIntFromInterval(min, max) { // min and max included 

  return Math.floor(Math.random() * (max - min + 1) + min)

}

function getImage(number){
  if(number < 1101){
  return "It was between 1080 and 1100"
  //for image you need to return the url for the image you want to display
  }
  if(number < 1121){
      return "It was between 1101 and 1120"
  }
  //and so on
}





$w.onReady(function () {
  let spinnable = true;

    // Declare the two groups of page elements

    const pink = $w('#image22')


    // Create the timeline

    // First hide the pink button, then rotate the white one

    
    //When the image/text is clicked, the image/text is hidden and the user can spin again
    $w("#NameOfTheThingTheUserClicks").onClick(()=>{
      $w("#NameOfTheThingTheUserClicks").hide()
      spinnable = true
    })

    // On click replay the timeline from the beginning

    pink.onClick(() =>{ 
      if(!spinnable)
      return  //If a spin has happened and the user tries to spin again before clicking your image, it won't spin

        const tl = timeline()

        .add(pink, { duration: 1000, rotate: rndInt, easing:  "easeOutCirc"})
        let rndInt = randomIntFromInterval(1080, 1440)
        spinnable = false;
        
        setInterval(() => {
          //for text:
          $w("#NameOfTheThingTheUserClicks").text = getImage(rndInt)
          //for image:
          $w("#NameOfTheThingTheUserClicks").url = getImage(rndInt)

          $w("#NameOfTheThingTheUserClicks").show()

          
          
      }, 1010); //1010 because the duration of the animation is 1000
    })

});

I’ve marked the new bits in red so it’s easy to see what I’ve added. I haven’t tested it, but it should work.