根据所选单选按钮，按钮如何显示不同的结果

问题描述：

我有这样的代码，在按钮单击时会生成随机的名字和姓氏。代码工作正常，但我正在寻找编辑功能，以便它检查选定的单选按钮，并根据性别生成不同的名称。这是我的代码：根据所选单选按钮，按钮如何显示不同的结果

// 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> 
 
\t <title>Viking Gen</title> 
 
</head> 
 
<body> 
 
\t <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>

你是怎么尝试？ *在这里是为了帮助，但不是为了解决你的功课 – Dekel

我试着添加另一个函数nameMef（）来从数组firstnamef生成名字，当按钮被单击时使用女性单选按钮选择，但没有奏效。 – TangoTime

也追平添加事件监听器， $（文件）。就绪（函数（）{ $（ '输入[类型=无线电]'）。点击（函数（）{ – TangoTime

答

使用文字names = {}一个对象来存储你的价值观。

比它的简单的事names.male[0]或names[gender][0]其中gender是:checked单选按钮names对象的male/female/other属性相匹配的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>

答

存储一个对象内的firstnames阵列相匹配单选按钮的值，该值的键。

然后，只需检查选中哪个单选按钮以获取正确的名字数组并在其中选择一个随机的名字。

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

根据所选单选按钮，按钮如何显示不同的结果

相关推荐