我有这段代码，可以在单击按钮时生成随机的名字和姓氏。代码工作正常，但我希望编辑该功能，以便它检查所选的单选按钮并根据性别生成不同的名称。这是我的代码：
// 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>使用对象文本names = {}来存储您的值。
比做names.male[0]或names[gender][0]很简单，其中gender是与names对象的male/female/other属性匹配的:checked单选按钮的value：
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>使用与单选按钮的值匹配的键将名字数组存储在对象中。
然后，只需检查选中哪个单选按钮即可获得正确的名字数组，并在其中选择一个随机的名字。
// 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"/>