Edit: my Js fiddle link didn't attach, trying again: https://jsfiddle.net/jbLd3kt1/
I am trying to make a simple generator with Javascript just for fun. It's an outfit generator with different combinations of clothing.
Right now I have two buttons for two types of outfits (I would like to add more in the future). I want to instead have one button, and it will choose an outfit type (#falloutfita or #falloutfitb) and then generate the random outfit based on that.
I thought maybe I could use an "or" || with the textContent but it looks like it's not possible.
Here is my Javascript code up through the first outfit type:
var allsweaters = ["blue hoodie", "black hoodie", "pink v-neck sweater", "gray pullover"];
var allpants = ["black casual pants", "dark old navy jeans", "medium old navy jeans", "black jumpsuit"];
var alllongshirts = ["long-sleeved white shirt", "long-sleeved gray shirt", "long-sleeved black shirt"];
var allovershirts = ["white button-up", "green jacket", "blue jean shirt"];
document.querySelector("#submitfalla").addEventListener("click", () => {
var sweater = "";
var pants = "";
var lsshirt = "";
var random_index = 0;
for (let i = 0; i < 1; i++) {
random_index = Math.floor(Math.random() * allsweaters.length);
sweater += allsweaters[random_index];
random_index = Math.floor(Math.random() * allpants.length);
pants += allpants[random_index];
random_index = Math.floor(Math.random() * allpants.length);
lsshirt += alllongshirts[random_index];
}
document.querySelector("#falloutfita").textContent = sweater + " and " + lsshirt + " and " + pants;
});<button id="submitfalla">Submit</button>
<div id="falloutfita"></div>It's my first post on stack overflow, please let me know if there is any way I should edit this question too! I've looked at similar questions here but haven't been able to successfully apply them to mine.
What do you think about that?
const allSweaters = ['blue hoodie', 'black hoodie', 'pink v-neck sweater', 'gray pullover']
const allPants = ['black casual pants', 'dark old navy jeans', 'medium old navy jeans', 'black jumpsuit']
const allLongShirts = ['long-sleeved white shirt', 'long-sleeved gray shirt', 'long-sleeved black shirt']
const allOverShirts = ['white button-up', 'green jacket', 'blue jean shirt']
function getRandomlyFrom (array) {
return array[Math.round(Math.random() * (array.length - 1))]
}
function getRandomOutfit () {
return [
getRandomlyFrom(allSweaters),
getRandomlyFrom(allPants),
getRandomlyFrom(
getRandomlyFrom([allLongShirts, allOverShirts]) // return one of the two arrays
)
].join(' and ')
}
function onClick () {
document.querySelector('#falloutfita').textContent = getRandomOutfit()
}
document.querySelector('#submitfalla').addEventListener(onClick)