How to copy multiple radio list buttons into a textarea and change skeleton into sound

Question

I have no idea where to start with this and came here to learn how to do it.

I have the following radio lists and textarea(#mcsound):

<input type="radio" name="skeleton" id="1mcskel1" value="Top" /> Top<br />
<input type="radio" name="skeleton" id="1mcskel2" value="Nose" /> Nose <br />
<input type="radio" name="skeleton" id="1mcskel3" value="Mouth" /> Mouth <br />
<input type="radio" name="skeleton" id="1mcskel4" value="Ribs" /> Ribs <br />
<input type="radio" name="skeleton" id="1mcskel5" value="Liver" /> Liver <br />
<input type="radio" name="skeleton" id="1mcskel6" value="Joints" /> Joints <br />
<input type="radio" name="skeleton" id="1mcskel7" value="Cap" /> Cap <br />
<input type="radio" name="skeleton" id="1mcskel8" value="Fibula" /> Fibula <br />
<input type="radio" name="skeleton" id="1mcskel9" value="Ball" /> Ball <br />
<input type="radio" name="skeleton" id="1mcskel1" value="Sea" /> Sea <br /><br /><br />
<input type="radio" name="skeleton2" id="2mcskel1" value="Top" /> Top<br />
<input type="radio" name="skeleton2" id="2mcskel2" value="Nose" /> Nose <br />
<input type="radio" name="skeleton2" id="2mcskel3" value="Mouth" /> Mouth <br />
<input type="radio" name="skeleton2" id="2mcskel4" value="Ribs" /> Ribs <br />
<input type="radio" name="skeleton2" id="2mcskel5" value="Liver" /> Liver <br />
<input type="radio" name="skeleton2" id="2mcskel6" value="Joints" /> Joints <br />
<input type="radio" name="skeleton2" id="2mcskel7" value="Cap" /> Cap <br />
<input type="radio" name="skeleton2" id="2mcskel8" value="Fibula" /> Fibula <br />
<input type="radio" name="skeleton2" id="2mcskel9" value="Ball" /> Ball <br />
<input type="radio" name="skeleton2" id="2mcskel0" value="Sea" /> Sea <br /><br />
<input type="radio" name="skeleton3" id="3mcskel1" value="Top" /> Top<br />
<input type="radio" name="skeleton3" id="3mcskel2" value="Nose" /> Nose <br />
<input type="radio" name="skeleton3" id="3mcskel3" value="Mouth" /> Mouth<br />
<input type="radio" name="skeleton3" id="3mcskel4" value="Ribs" /> Ribs <br />
<input type="radio" name="skeleton3" id="3mcskel5" value="Liver" /> Liver <br />
<input type="radio" name="skeleton3" id="3mcskel6" value="Joints" /> Joints <br />
<input type="radio" name="skeleton3" id="3mcskel7" value="Cap" /> Cap <br />
<input type="radio" name="skeleton3" id="3mcskel8" value="Fibula" /> Fibula <br />
<input type="radio" name="skeleton3" id="3mcskel9" value="Ball" /> Ball <br />
<input type="radio" name="skeleton3" id="3mcskel0" value="Sea" /> Sea <br /><br />
Sound:<br/> <textarea name="sound" type="text" rows="6" cols="30" id="mcsound"></textarea><br/><br/>

The JSFiddle can be found here https://jsfiddle.net/Lpm38noj/2/

Okay now what I'm trying to do is add the following to match the above values.
1. Top = Tah, Dah
2. Nose = Nah
3. Mouth = Mah
4. Ribs = Rah
5. Liver = Lah
6. Joints = Juh, Shuh, Chuh
7. Cap = Cah, Kah, Gah
8. Fibula = Fah, Vah
9. Ball = Bah, Pah
0. Sea = Sah, Zah etc..

So if from the 3 radio lists I select 1 radio button from each and have 146 for example in the textarea it would say:

EDIT: Update I would like 1. 4. 6. Instead of 123 sorry, I did have the numbers below but stackoverflow numbered list changed my numbers.

1. Tah, Dah
2. Rah
3. Juh, Shuh, Chuh

3 rows for the 3 radio buttons within the textarea. I hope this makes sense?

I'm stumped as how to do this, I wouldn't even know where to start. :(

Cheers, Dan

Answer 1

Here is how I did it using pure javascript:

Fiddle: https://jsfiddle.net/Lpm38noj/4/

// Holds currently selected radio values, initialized to empty strings
// Use the radio button names so we can have a dynamic function set them
var skeleton = {
 "skeleton": "",
 "skeleton2": "",
 "skeleton3": ""
};
// Defines each radio values sound
var sounds = {
 "Top": "Tah, Dah",
 "Nose": "Nah",
 "Mouth": "Mah",
 "Ribs": "Rah",
 "Liver": "Lah",
 "Joints": "Juh, Shuh, Chuh",
 "Cap": "Cah, Kah, Gah",
 "Fibula": "Fah, Vah",
 "Ball": "Bah, Pah",
 "Sea": "Sah, Zah"
};
// Attaches event listener to each radio button
var radios = document.querySelectorAll('[type="radio"]');
var radio, index = 0, length = radios.length;
for ( ; index < length; index++) {
 radio = radios[index];
 radio.addEventListener('change', onChangeRadio);
}
// Updates selected value of radio button
function onChangeRadio (event) {
 var radio = event.target;
 // Use name to set currently selected object's property to radio value(sound)
 skeleton[radio.name] = sounds[radio.value];
 // Call function to update textarea value
 updateTextArea()
}
// Updates textarea value
function updateTextArea () {
 // Get text area
 var textarea = document.getElementById('mcsound');
 // Initialize new string
 var newValue = "";
 // For each selected value only set it if it has a value (\n for new lines)
 if (skeleton["skeleton"] != "") {
 newValue += "1. " + skeleton["skeleton"];
 }
 if (skeleton["skeleton2"] != "") {
 newValue += "\n2. " + skeleton["skeleton2"];
 }
 if (skeleton["skeleton3"] != "") {
 newValue += "\n3. " + skeleton["skeleton3"];
 }
 // Set built string to value of textarea
 textarea.value = newValue;
}

And since your previous question had to do with simplifying code if you make the first radio name skeleton1 instead of just skeleton we can simplify the textarea update function to this:

function updateTextArea () {
 var textarea = document.getElementById('mcsound'), newValue = "", index = 1;
 for ( ; index < 4; index++) {
 if (skeleton["skeleton" + index] != "") {
 index > 1 ? newValue += "\n" : ""
 newValue += index + ". " + skeleton["skeleton" + index];
 }
 }
 textarea.value = newValue;
}

Fiddle: https://jsfiddle.net/Lpm38noj/5/

EDIT

So here is an update to display the radio button index so you get 146 as you want. I added a new function to determine the index of the radio button:

Fiddle: https://jsfiddle.net/Lpm38noj/7/

function getIndex (context) {
 var index = 1;
 while (context = context.previousElementSibling) {
 if (context.type == "radio") {
 index++;
 }
 }
 return index;
}

• aussiedan: This is awesome @AtheistP3ace works perfectly and is easy to understand. It was my mistake I was after the 1 2 3 in the texarea to be the number that is selected e.g in this example it should be: 146 1. Tah, Dah 4. Rah 6. Juh, Shuh, Chuh Because that way I'm keep uniform, but I know I didn't specify that in the post. Either way thanks a million! But stackoverflow is changing my 1. 4. 6. to a numbered list so it reads 1. 2. 3. :(
• aussiedan: Hello again AtheistP3ace any idea why this is not working with the previous javascript? If I enter the 3 numbers it selects them in the radio buttons. But only when I actually click on the radio buttons it adds them to the sounds textarea? jsfiddle.net/Lpm38noj/6 Cheers
• AtheistP3ace: @aussiedan what do you expect to happen? I thought that's what you wanted. Click radio button update text area.
• AtheistP3ace: @aussiedan I updated with new fiddle to display 146 like you want. I am still unsure what your second comment means and what you expect to happen.
• aussiedan: Awesome @AtheistP3ace works great, thank you for all your help! Made understanding the process and theory very easy to follow!

Answer 2

Create a lookup for the sounds then use them.

I used jQuery for the input processing and events but the main idea is the lookup and using it:

var sounds = [
{'match': 'Top',sound: 'Tah, Dah'},
{'match': 'Nose',sound: 'Nah'},
{'match': 'Mouth',sound: 'Mah'},
{'match': 'Ribs', sound: 'Rah'},
{'match': 'Liver',sound: 'Lah'},
{'match': 'Joints', sound: 'Juh, Shuh, Chuh'},
{'match': 'Cap', sound: 'Cah, Kah, Gah'},
{'match': 'Fibula',sound: 'Fah, Vah'},
{'match': 'Ball', sound: 'Bah, Pah'},
{'match': 'Sea', sound: 'Sah, Zah'}
];
var lookup = {};
// create reference to list above and use it everywhere
lookup.list = sounds;
for (var i = 0, len = lookup.list.length; i < len; i++) {
 lookup[lookup.list[i].match] = lookup.list[i];
}
var radioGroups = '#mc-skeleton-c,#mc-skeleton-c2,#mc-skeleton-c3';
function processRadios() {
 $('#themcsound').find('textarea').text("");
 $(radioGroups).find('input:checked').each(function(index) {
 var skel = $(this).val();
 var mychoice = lookup[skel];
 var prior = $('#themcsound').find('textarea').text();
 prior = prior ? prior + "\n" : prior;
 $('#themcsound').find('textarea').text(prior +(index+1)+". "+ mychoice.sound);
 });
}
$(radioGroups).on('change', 'input[type=radio]', function() {
 processRadios();
});

• aussiedan: Awesome Thanks @Mark Schultheiss even though I asked for Javascript I'm wanting to learn jQuery as well so it's good to see the contrast between your code and AthiestP3ace

Answer 3

Here you can find a working example implementing module pattern: Click here to watch the JS Bin

This is a piece of the Javascript code to accomplish the requirement:

var skeleton = (function(skeletonModule, document){
 skeletonModule.soundHandle = (function(){
 var textArea = document.getElementById('mcsound');
 // Here you are saving which sounds to make depending on which value
 var sounds = 
 {'Top': 'Tah, Dah',
 'Nose': 'Nah',
 'Mouth': 'Mah',
 'Ribs': 'Rah',
 'Liver': 'Lah',
 'Joints': 'Juh, Shuh, Chuh',
 'Cap': 'Cah, Kah, Gah',
 'Fibula': 'Fa, Vah',
 'Ball': 'Bah, Pah',
 'Sea': 'Sah, Zah'};
 // This function attachs the check event to the radio buttons
 // according to the markup
 function attachCheckEvent(){
 var radios = document.querySelectorAll('[type="radio"]');
 var radio;
 for (var i = 0; i < radios.length; i++) {
 radio = radios[i];
 radio.addEventListener('change', function(){
 var that = this;
 return function(){
 // May be here you must check if radio button is checked
 // anyway, this is working for me
 textArea.value += sounds[that.value] + '\n';
 }();
 });
 }
 }
 // Here we are attaching the events to desired inputs
 function initEvents(){
 attachCheckEvent();
 }
 // This is the interface published by the skeletonModule.soundHandle module
 return {
 init: initEvents
 }
 }());
 return skeletonModule;
}(skeleton || {}, document)); // We pass to the IIFE the skeleton object. If is null we pass an empty object literal
skeleton.soundHandle.init();

Hope this helps.

• AtheistP3ace: jQuery wasn't tagged in the question.
• wilsotobianco: That's true. I'll fix it.
• aussiedan: It helps thanks a lot for taking your time to help me @wilsotobianco