I've read many other posts regarding this common issue, and I encourage anyone who sees this to read this entire post through. None of the other solutions that I've found have worked for me (I include a failed attempt below).
I have a functioning random generator that uses HTML and JavaScript. Each time a button is pushed, the function chooses a single item from an array and displays it using: 'document.getElementById'. Please see the below snippet for the working function. My problem is that I dislike the way it displays the same array items back to back or before some of the others have been see; the function is TOO RANDOM. I've been working on finding a way to change my random function so that it only displays repeat items once the entire array has been looped through.
var oddnumber = [
'111',
'222',
'333',
'444',
'555',
]
var oddletter = [
'AAA',
'BBB',
'CCC',
'DDD',
'EEE',
]
function newThing() {
if(numberCheck.checked) {
var randomY = oddnumber;
}
if(letterCheck.checked) {
var randomY = oddletter;
}
var randomX = Math.floor(Math.random() * (randomY.length));
var y = randomY;
var x = randomX;
document.getElementById("thingDisplay").innerHTML = y[x];
}<body>
<div id='thingDisplay'></div>
<div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>
<div>
<form>
Number<label> <input type="radio" name="thing" id="numberCheck"/></label>
<br/>Letter<label> <input type="radio" name="thing" id="letterCheck"/></label>
</form>
</div>
</body>Many answers detail different ways to slice the array and push the slice to the bottom, but I'm unsure if this is what I'm looking for. Placing displayed items in a separate array is something I'd like to avoid since I will probably have thousands of array items in real world use, so it probably wouldn't be efficient.
Failed Attempt 1:
var oddnumber = [
'111',
'222',
'333',
'444',
'555',
]
var oddletter = [
'AAA',
'BBB',
'CCC',
'DDD',
'EEE',
]
function newThing() {
if(numberCheck.checked) {
var randomY = oddnumber;
}
if(letterCheck.checked) {
var randomY = oddletter;
}
var res = randomY.sort(function() {
return 0.5 - Math.random();
});
console.log(res.slice(randomY,1))
document.getElementById("thingDisplay").innerHTML = [console.log];
}<body>
<div id='thingDisplay'></div>
<div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>
<div>
<form>
Number<label> <input type="radio" name="thing" id="numberCheck"/></label>
<br/>Letter<label> <input type="radio" name="thing" id="letterCheck"/></label>
</form>
</div>
</body>Failed Attempt 2:
var oddnumber = [
'111',
'222',
'333',
'444',
'555',
]
var oddletter = [
'AAA',
'BBB',
'CCC',
'DDD',
'EEE',
]
function newThing() {
if(numberCheck.checked) {
var randomY = oddnumber;
}
if(letterCheck.checked) {
var randomY = oddletter;
}
var selected;
var temp;
var str = "";
var stub = "";
for(var i = 0; i < randomY.length; i++){
temp = randomY[i][Math.floor(Math.random() * randomY[i].length)];
while(selected.contains(temp)){
temp = randomY[i][Math.floor(Math.random() * randomY[i].length)];
}
selected.push(temp);
str += temp;
if(i < randomY.length - 1){str += stub;}
}
var x = i;
document.getElementById("thingDisplay").innerHTML = y[x];
}<body>
<div id='thingDisplay'></div>
<div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>
<div>
<form>
Number<label> <input type="radio" name="thing" id="numberCheck"/></label>
<br/>Letter<label> <input type="radio" name="thing" id="letterCheck"/></label>
</form>
</div>
</body>Edit: Preserving the 'document.getElementById' and the 'if' statements that determine the value of randomY is crucial.
Aucun commentaire:
Enregistrer un commentaire