How can a button display different results depending on radio button selected
Question
I have this code that generates random first and last names upon button click. The code works fine but i'm looking to edit the function so that it checks the radio button selected and generate different names according to gender. Here is my code:
// Create an array of first names var firstNamem = ['Ragnar', 'Bjorn', 'Eric', 'Olaf', 'Ivar', 'Harald', 'Sigurd', ]; var firstnamef = ['Babbete','Babs','Astrid', 'Lachie','Lady','Lael','Bodil','Fridagertud'] var firstnameo = ['Alex','Evan','Esra','Finn','Gael','Dyre','Ronnie','Dale'] // Create an array of last names var lastName = ['Lodbrok', 'Ironside', 'Bloodaxe', 'the Boneless', 'War-Tooth', 'Foul-Fart', 'Troll-Buster']; //Event listener $(document).ready(function(){ $('input[type=radio]').click(function(){ }); }); //Create function that will be called when the button is clicked if(gender == 'male'){ function nameMe() { var rfn = firstNamem[Math.floor((Math.random() * firstNamem.length))]; var rln = lastName[Math.floor((Math.random() * lastName.length))]; document.getElementById('yourNameIs').textContent = rfn + " " + rln; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <title>Viking Gen</title> </head> <body> <h1>Viking Name Generator</h1> <br/> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> <br/> <button onclick="nameMe()">My Name is</button> <span id="yourNameIs"></span>
2 answers
solution1
1 2017-08-11 21:48:04
Store the firstnames arrays inside an object with keys that match the value of the radio buttons.
Then, simply check which radio button is checked to get the correct firstnames array and pick a random firstname inside it.
// Create an array of first names const firstnames = { male: ['Ragnar', 'Bjorn', 'Eric', 'Olaf', 'Ivar', 'Harald', 'Sigurd'], female: ['Babbete', 'Babs', 'Astrid', 'Lachie', 'Lady', 'Lael', 'Bodil', 'Fridagertud'], other: ['Alex', 'Evan', 'Esra', 'Finn', 'Gael', 'Dyre', 'Ronnie', 'Dale'] } // Create an array of last names const lastName = ['Lodbrok', 'Ironside', 'Bloodaxe', 'the Boneless', 'War-Tooth', 'Foul-Fart', 'Troll-Buster']; function nameMe() { const gender = document.querySelector("[name='gender']:checked").value; const rfn = firstnames[gender][Math.floor((Math.random() * firstnames[gender].length))]; const rln = lastName[Math.floor((Math.random() * lastName.length))]; document.getElementById('yourNameIs').value = rfn + " " + rln; }
<input name="gender" type="radio" value="male" checked> Male<br> <input name="gender" type="radio" value="female"> Female<br> <input name="gender" type="radio" value="other"> Other <br> <button onClick="nameMe()">Generate name</button> <input id="yourNameIs"/>
solution2
1 ACCPTED 2017-08-11 21:53:00
Use an Object Literal names = {} to store your values.
Than it's simple to do names.male[0] or names[gender][0] where gender is the value of the :checked radio button that matches the male / female / other property of names Object:
var names = { male: ['Ragnar', 'Bjorn', 'Eric', 'Olaf', 'Ivar', 'Harald', 'Sigurd', ], female: ['Babbete','Babs','Astrid', 'Lachie','Lady','Lael','Bodil','Fridagertud'], other: ['Alex','Evan','Esra','Finn','Gael','Dyre','Ronnie','Dale'], last: ['Lodbrok', 'Ironside', 'Bloodaxe', 'the Boneless', 'War-Tooth', 'Foul-Fart', 'Troll-Buster'] }; function nameMe() { var gnd = document.querySelector("[name='gender']:checked").value; var rfn = names[gnd][Math.floor((Math.random() * names[gnd].length))]; var rln = names.last[Math.floor((Math.random() * names.last.length))]; document.getElementById('yourNameIs').textContent = rfn + " " + rln; } document.getElementById("generate").addEventListener("click", nameMe);
<label> <input type="radio" name="gender" value="male" checked> Male </label> <label> <input type="radio" name="gender" value="female"> Female </label> <label> <input type="radio" name="gender" value="other"> Other </label> <br> <button id="generate">GENERATE</button> <br> Your name is: <b id="yourNameIs"></b>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display an output depending on the selected radio button after selecting a radio button?
How to call a function depending on the radio button selected
Display different results based on radio button selection
Making one of a number of fieldsets display depending on a selected radio button
How to display “selected radio button” after refresh?
How to display a radio button selected using a variable?
Make a form submit display a different page depending on radio button answers
How can I link one radio button on click to display a different drop down while hiding the one currently selected in the same location?
How to set the default selected radio button in a group depending on a database value?
How to populate textbox depending on which radio button is selected?
Related Tags