一个按钮如何根据选择的单选按钮显示不同的结果
[英]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>
2 个解决方案
解决方案1
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"/>
解决方案2
1 已采纳 2017-08-11 21:53:00
Use an Object Literal names = {} to store your values. 使用对象文字names = {}来存储您的值。
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: 比它的简单的事names.male[0]或names[gender][0]其中gender是value的的:checked单选按钮的相匹配male / female / other的属性names对象：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.