Hello, i have a question and im not good with javascript, i gather ideas to code in internet and come up with this code and output
<script type="text/javascript">
window.onload = function() {
let i = 0;
let x = 0;
var namesDiv = document.getElementById("names");
var datas = {!! $data !!};
console.log(datas)
var namesList = datas;
var pickerDiv = document.getElementById("startButton");
var winnerDiv = document.getElementById("winner");
var setWinner = document.getElementById("setWinner");
let intervalHandle = null;
var headerOne = document.getElementById("headerNames");
if (!Array.isArray(namesList) || !namesList.length) {
pickerDiv.style.display = "none";
} else {
pickerDiv.style.display = "block";
winnerDiv.style.display = "none";
}
document.getElementById("startButton").addEventListener("click", function () {
confetti.remove();
picker.style.display = "block";
});
document.getElementById("startButton").addEventListener("click", function () {
this.style.display = "none";
shuffle(namesList);
confetti.remove();
intervalHandle = setInterval(function () {
headerOne.value = namesList[i++ % namesList.length];
}, 50);
setTimeout(function(){
clearInterval(intervalHandle);
startButton.style.display = "none";
winnerDiv.style.display = "block";
confetti.start();
}, 3000);
});
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
}
</script>
i can generate 1 random name in my page in that code, but i don't know which variable in the code is the final result, i tried put them in console.log and didn't find it because the result in the page and console is different. Im asking this question because i want to edit the code to generate 5 random names. Anyone can help me? (hope i explain it well).
It's hard to 100% confirm without the actual UI, but from what I understand, this code causes names to change quickly before stopping on one name and showing a winning UI with confettis.
What did you try to log in the console ? Because from my understanding, if you log headerOne.value under confetti.start();, you would get the actual displayed value.
@piljac1 thanks i get the actual data! last time i console it under the headerOne that's why the result is different. Can you give me an idea how can i get 5 random names?