Zufallsgenerator-preset-20220912_1115.zip

zufall3.mp4

<style>
h1#headerNames  {
	text-align: center;
	display: block;
	font-size: 5.0em;
 }

#stopButton  {
	display: none;
 }

.buttons  {
	text-align: center;
 }
</style>

<h1>Zufallsauswahl</h1>
<details><summary>Namen bearbeiten</summary>
<form><i>Bitte Namen mit Komma getrennt eingeben</i>
<textarea type="text" class="form-control" name="elemente" id="elemente" rows="3">
bernd,anna,lisa,olaf,shanya,bodo,lise,mola,ian,erwin,katha,vladi,elvis,filip,mona,sila,sina,frodo,kana,bela,nora,safa,flo,nobi,mila</textarea>
</form></details><br><br>
<script>
function takeInputValue()
{
namesList = document.getElementById('elemente').value.split('\\,').filter(Boolean);
}
</script>

<h1 id="headerNames" class="alert alert-primary">?</h1>
<div class="buttons">
<button type="button" class="btn btn-success" id="startButton" onclick="takeInputValue()">Start</button>
<button type="button" class="btn btn-danger" id="stopButton">Stop</button>
</div>
<script>
	"use strict"; // Default variables
let i =  0;
let x =  0;
let intervalHandle =  null;
const startButton =  document.getElementById('startButton');
const stopButton =  document.getElementById('stopButton');
const headerOne =  document.getElementById('headerNames'); // Start or stop the name shuffle on the button click
startButton.addEventListener('click',  function() {
    this.style.display =  "none";
    stopButton.style.display =  "inline";
    intervalHandle =  setInterval(function () {
        headerNames.textContent =  namesList[i++ %  namesList.length];
    },
     50);
});
stopButton.addEventListener('click',  function() {
    this.style.display =  "none";
    startButton.style.display =  "inline";
    clearInterval(intervalHandle);
});
</script>