選択したラジオボタンによって、ボタンの結果が異なる場合があります。

ボタンをクリックすると、ランダムな名字を生成するこのコードがあります。コードは正常に動作しますが、私は選択されたラジオボタンをチェックし、性別に応じて異なる名前を生成するように関数を編集したいと考えています。ここに私のコードは次のとおりです。ラジオボタンの値と一致するキーを持つオブジェクトの内部選択したラジオボタンによって、ボタンの結果が異なる場合があります。

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

出典

2017-08-11 TangoTime

：それはnames.male[0]かgenderがnamesオブジェクトのmale/female/otherプロパティと一致:checkedラジオボタンのvalueあるnames[gender][0]を行うには簡単なのものより

試してみる？あなたの宿題を解決するために、ここではstackoverflowは役に立ちますが、 – Dekel

ボタンは女性ラジオボタンの選択でクリックされたが、それは動作しませんでした配列firstnamefから名前を生成する別の関数nameMef（）を追加しようとしました。 – TangoTime

は、イベントリスナー、 $（ドキュメント）.ready（関数（）{ $（ '入力[タイプ=ラジオ]'）追加結んだ。（関数（）{ – TangoTime

あなたの値を格納するためにリテラル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>

出典

2017-08-11 21:53:00

ストアfirstnamesアレイ。

次に、正しいラジオボタンが選択されていることを確認して、正しいfirstnames配列を取得し、その中のランダムなfirstnameを選択するだけです。

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

出典

2017-08-11 21:48:04 Erazihel

選択したラジオボタンによって、ボタンの結果が異なる場合があります。

答えて

関連する問題