[英]How can a button display different results depending on radio button selected
我有这段代码，在单击按钮时会生成随机的名字和姓氏。 该代码工作正常，但我正在编辑功能，以便它检查选中的单选按钮并根据性别生成不同的名称。 这是我的代码：
// 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>
使用与单选按钮的值匹配的键将名字数组存储在对象内。
然后，只需检查选中了哪个单选按钮即可获取正确的名字数组，并在其中选择一个随机的名字。
// 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"/>
使用对象文字names = {}来存储您的值。
比它的简单的事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>
选择单选按钮后，如何根据所选单选按钮显示输出？
[英]How to display an output depending on the selected radio button after selecting a radio button?
根据选定的单选按钮显示多个字段集之一
[英]Making one of a number of fieldsets display depending on a selected radio button
根据单选按钮的答案，使表单提交显示不同的页面
[英]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?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.