Button onclick using an array/function?

Question

Hey,

I've created a random football team name generator using an array and function.

I've added a button to my HTML and used onclick to access the function.

It works fine, the problem I have is my array has 183 team names and when I click the button to generate a random team the user would have to refresh the page to press the button again.

Basically the button disappears when the user clicks to get a random team, I would like them to be able to click the button as many times as they like without refreshing.

Here is my code:

/****************************** HTML **********************************/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample JS</title>
</head>
<body>
<button onclick="randomTeamGenerator()">Shuffle</button>
    <script type="text/javascript" src="samplejs.js"></script>
</body>
</html>

/****************************** JAVASCRIPT **********************************/

var fantasyTeams = ["2 Goals 1 Cup", "50 Shades of O’Shea", "99 Problems But A Pitch Ain’t One", "ABCDE FC", "Absinthe Minded XI",
"Absolutely Fabregas", "AC a little silhouette of Milan", "Aint got a Kalou", "Albion Hungovers", "Alice in Hangeland",
"Athletico Madras", "Babylon FC", "Back of the Net", "Baines on Toast", "Bakers Dozen", "Ball Busters", "Barca Bone Her",
"Barca Loner", "Bayer Neverlosin", "Bayern Bru", "Bébé on Board", "BenTekkers", "Betty Swollocks", "Blind Beavers", "Blue Balls of Destiny",
"Borussia Teeth", "Breast Homage Albion", "Brown Star Belgrade", "Bunch of Punts", "Call me Bebé", "Camel Toes",
"Can’t Score Won’t Score", "Cech that Hazard", "Cereal Killers", "Chamakh My Pitch Up!", "Chicken Kiev", "Choking Hazard",
"Cleverley Dunne", "Club Foot", "Coutinho Defence Up", "Cream Tea FC", "Crouch Potato FC", "Crystal Meth Palace", "Crystal Phallus", "Debbie Does Gallas",
"De Gea Bar", "Diaby Does Gallas", "Dirty Alexis Sanchez", "Disgruntled Postal Workers", "Doesn’t Mata", "Dont call me Schurrle", "Dont Look Back In Wenger",
"Dream Killers", "Dukes Of Hazard", "Dynamo Chicken Kiev", "Dynamo Fuchtherest", "Dyslexia Untied", "Escape From Alcaraz", "Eventual Champions",
"Fake Madrid", "Farcelona", "Fatzio", "FC Bath-a-loner", "FC Copenbadly", "FC Portaloo", "FC Sporting Lesbian", "Fighting Lawn Ornaments",
"Fiorentina Turner", "Fluorescent Lampards", "ForEvra Young", "Fred West Ham", "Giggs Boson", "Good Name", "Hammer Time", "Hardly Athletic",
"Haven’t Got A Kalou", "Hazardous", "HGV Eindhoven", "Hit Me Bebe One More Time", "How I Met Your Mata", "Howard Webb FC",
"Hung like a Bony", "Inter Mi-Nan", "Inter Mi-Naan Bread", "Inter Row Z", "Inter Ya Mam", "It Doesn’t Mata", "It’sanogo Sanogo", "Joe Public", "Juventarse",
"Kick The Ball", "Kings of Leon Osman", "Kingslayers XI", "Kun Ba Yaya My Lord", "Lads on Touré", "Le Saux Solid Crew", "Leave My Arcelona",
"Load o Ballacks", "Lords of the Pitch", "LSD Eindhoven", "Major League Clowns", "Man Chest Hair Utd", "Man You FC", "McPudlians", "Mean Machine",
"Me FC", "Mitchachu", "Michu Michu Man", "Moves Like Agger", "Multiple Scorgasms", "Murder On Zidanes Floor", "My Little Kone", "My Little Bony",
"Natural Selection", "Never Wok Alone", "Nice to Michu", "No F in Chance", "Norfolk-in-Chance", "Nottingmymums Forest", "No Wucking Forries",
"Outer Milan", "Out on Bale", "Own Goal", "Part Vole", "Pass and Move", "Petr Cech Yourself", "PMT Eindhoven", "Pork Sausage Utd", "Port Bale",
"Queens Park Caners", "Rapid Viagra", "Ra Ra Rasputin", "Real Ale Madrid", "Real Betis Hotpot", "Real Mackay", "Real Madras", "RealAle Madrid",
"Real Sociable", "Real Sosobad", "Released on Bale", "Roast Leg of Lampard", "Rocky & Wolfswinkel", "Rusty Nail", "Sagna Carta Holy Bale", "Santi’s Little Helper",
"Scared Hitless", "Schindlers Assist", "Schürrle Hazardous", "Schürrle Not Again", "Serendipity United", "Shackthar Senseless", "Sheffield Thursday", "Slumdog Mignolet",
"Sons of Mothers", "Sons of Pitches", "Sons of Spartacus", "Soup-A-Stars", "Sporting Lesbian", "Suarez Ate My Hamster", "Suarezident Evil", "Surreal Madrid",
"Tea & Busquets", "Teenage Mutant Ninja Skrtels", "Teflon Don’s", "Tekkerslovakia", "Tevez Ate My Pedalo", "The Big Lewandowski", "The Soldados",
"The Usual Suspects", "The Village Idiots", "The Window Lickers", "Thomas Müller Corner", "TyrannoSuarez Reds", "TyrannoSuarez Rex", "Unathletic Madrid",
"Unreal Madrid", "Untouchables", "Van Pipsqueak", "Vaz Tê Mata", "Victorious Secret", "Wing and a Prayer", "You Can’t Handle The Huth", "Your Mums Athletic"];

function randomTeamGenerator(){

document.body.innerHTML = fantasyTeams[Math.floor(Math.random() * fantasyTeams.length)];

}

Thanks Joe :)

Answer 1 · 2015-06-25T11:47:54Z

June 25, 2015 11:47am

Hi Joe,

As your code stands, when the user presses the button, the entire html of the body is replaced by the function result.. and the button disappears.

Easy fix: Add an empty HTML element after your button like so:

html

<div id="teamName"></div>

In your js change

document.body.innerHTML =

to

document.getElementById('teamname').innerHTML =

So you only replace the contents of your <div> tag, not the whole html body.

Answer 2 · 2015-06-25T11:51:18Z

June 25, 2015 11:51am

Thanks man that works perfect!!

Welcome to the Treehouse Community

Looking to learn something new?

Joe Consterdine

Joe Consterdine

Button onclick using an array/function?

2 Answers

Petros Sordinas

Petros Sordinas

Joe Consterdine

Joe Consterdine

Petros Sordinas

Petros Sordinas