One random item per day from JavaScript array

Question

I am using javascript array to randomly select source for video player. Everytime I refresh the window it randomly chooses another source from the array to play (which is I guess 'window.onload'). Instead, I want it to choose 1 source, randomly, every day at certain time (lets say 9 PM), and stick with it until next one is chosen following day.

I tried using some methods for setting date I found here, but nothing works without messing with the current script. I would appreaciate if someone could help me maintain current function, but make it daily.

const srcArray = [
    "source1",
    "source2",
    "source3"
];

const source = document.querySelector("video");

window.onload = () => generateRandomSrc(srcArray);

function generateRandomSrc(array){
    let randomNum = Math.floor(Math.random() * array.length); 
    source.setAttribute("src", array[randomNum]);
}

You'll need to use [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store the date and time of the last visitor access from that client and then compare that time to see if it is time to generate a new random result. — Scott Marcus, Feb 07 '21 at 21:23
Do you want all visitors to see the same "random" video every day? Or should every visitor get a different random video every day? — kmoser, Feb 07 '21 at 21:25
Video should be same for every user. Like a "Video of the Day" feature, which refreshes every day — nickberckley, Feb 07 '21 at 21:32
@nickberckley then you'd need a server-side script to pick the video. That can't be done client-side. — Patrick Roberts, Feb 07 '21 at 21:33
How would I do it from client-side (every user sees different 'random' video) but daily? That would also help me, I'm mostly interested in learning about timing function — nickberckley, Feb 07 '21 at 21:43

score 1 · Accepted Answer · answered Feb 08 '21 at 08:46

Instead of using Math.random which will be differ in each run in each client, Generate random index based on day, month, and year. (This should same valid index when you run on same day)

const srcArray = [
    "source1",
    "source2",
    "source3"
];

const source = document.querySelector("#video");

window.onload = () => generateRandomSrc(srcArray);

const random = () => {
  const date = new Date();
  return (date.getFullYear() * date.getDate() * (date.getMonth() + 1)) % srcArray.length;
}

function generateRandomSrc(array) {
    source.innerText = `Today's video ${srcArray[random()]}`
}

<div id="video"> </div>

score 0 · Answer 2 · answered Feb 08 '21 at 02:03

0

you can use date function, new Date().getDay() day of week (7) or new Date().getDate() (28-31)

const srcArray = [
    "source1",
    "source2",
    "source3",
    "source4",
    "source5",
    "source6",
    "source7"
];

const source = document.querySelector("video");

window.onload = () => generateRandomSrc(srcArray);
function generateRandomSrc(array){
    const today = new Date().getDay();
    console.log("today video is:", srcArray[today])
}

answered Feb 08 '21 at 02:03

uingtea

6,002
2
26
40

I did some tweaks on this code and think made it work. I will be running tests today and tomorrow to observe pattern of change in sources, fingers crossed it works – nickberckley Feb 08 '21 at 08:09

One random item per day from JavaScript array

2 Answers2