CODEWITHSUNDEEP
javascripthtml
TangoTime
TangoTime

Reputation: 11

How can a button display different results depending on radio button selected

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>

Upvotes: 0

Views: 93

Answers (2)

Erazihel
Erazihel

Reputation: 7605

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"/>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

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>

Upvotes: 1

Related Questions