- The old-new and new-old modes move through the arrays from top to bottomtop-to-bottom and bottom to topbottom-to-top, respectively.
put options into an object that can contain the current index, and make the object a property of an object where the property name (i.e. key) is the type of thing - e.g.
const options = { video: { options: [ //VIDEO ARRAY 'video1', 'video2', 'video3', 'video4', 'video5', ], currentIndex: -1 }, audio: { options: [ //AUDIO ARRAY 'audio1', 'audio2', 'audio3', 'audio4', 'audio5', ], currentIndex: -1 }, photo: { options: [ //PHOTO ARRAY 'photo1', 'photo2', 'photo3', 'photo4', 'photo5', ], currentIndex: -1 }, text: { options: [ //TEXT ARRAY 'text1', 'text2', 'text3', 'text4', 'text5', ], currentIndex: -1 }, }instead of using
idattributes for the radio buttons, just give themvalueattributesreference the form elements via
document.forms.elementsdetermine which radio buttons are selected via
RadioNodeList.valueuse an
<output>element for the display of the thing.use a class to encapsulate the indexes, along with methods to get an item based on the mode
const optionsclass =ThingList {
video:constructor(items) {
options: [this.items //VIDEO= ARRAYitems;
this.randomUnused = 'video1',[...items];
this.forwardIndex = 'video2',0;
this.reverseIndex = 'video3',
items.length - 1;
}
'video4',forwardItem() {
return this.items[this.forwardIndex++ 'video5',% (this.items.length)];
}
],randomItem() {
currentIndex:if -1(!this.randomUnused.length) {
},
audio: { this.randomUnused.push(...this.items);
options:}
[ //AUDIO ARRAY
const index = Math.floor(Math.random() * 'audio1',this.randomUnused.length)
return 'audio2'this.randomUnused.splice(index,
1);
}
reverseItem() 'audio3',{
if (this.reverseIndex 'audio4',< 0) {
'audio5',this.reverseIndex = this.items.length - 1;
],}
currentIndex:return this.items[this.reverseIndex-1-];
},
}
const options photo:= {
optionsvideo: new ThingList([ //PHOTOVIDEO ARRAY
'video1',
'photo1' 'video2',
'video3',
'photo2''video4',
'video5',
'photo3']),
audio: new ThingList([ //AUDIO 'photo4',ARRAY
'photo5''audio1',
]'audio2',
currentIndex: -1'audio3',
} 'audio4',
text: { 'audio5',
]),
optionsphoto: new ThingList([ //TEXTPHOTO ARRAY
'photo1',
'text1' 'photo2',
'photo3',
'text2' 'photo4',
'photo5',
'text3']),
text: new ThingList([ //TEXT 'text4',ARRAY
'text1',
'text5' 'text2',
]'text3',
currentIndex: -1'text4',
} 'text5',
])
}
const output = document.getElementsByTagName('output')[0];
//GENERATOR FUNCTION
function newThing() {
if (!(document.forms.thingSelection.type.value in options)) {
return false;
}
const list = options[document.forms.thingSelection.type.value];
switchconst (method = document.forms.thingSelection.mode.value) {
case+ 'random':'Item';
const list.currentIndexitem = Math.floor(Math.random() * (list.options.length));
break;
case 'asc':
if list[method](list.currentIndex < 1) {
list.currentIndex = list.options.length;
}
list.currentIndex--;
break;
case 'desc':
++list.currentIndex;
break;
}
output.innerHTML = list.options[list.currentIndex % (list.options.length)];item;
}
document.getElementsByTagName('button')[0].addEventListener('click', newThing).center {
text-align: center;
}
.right {
text-align: right;
}<div class="center"><output></output></div>
<div class="center">
<button>New Thing</button>
</div>
<form name="thingSelection">
<label><input type="radio" name="mode" value="random" /> Random</label>
<br /><label><input type="radio" name="mode" value="desc"value="forward" /> Old - New</label>
<br /><label><input type="radio" name="mode" value="asc"value="reverse" /> New - Old</label>
<div class="right">
<label>Video <input type="radio" name="type" value="video" /></label><br />
<label>Audio <input type="radio" name="type" value="audio" /></label><br />
<label>Photo <input type="radio" name="type" value="photo" /></label><br />
<label>Text <input type="radio" name="type" value="text" /></label>
</div>
</form>