2

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

Improve this question

3 Answers 3

Reset to default
3

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

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. :(
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
@aussiedan what do you expect to happen? I thought that's what you wanted. Click radio button update text area.
@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.
Awesome @AtheistP3ace works great, thank you for all your help! Made understanding the process and theory very easy to follow!
|
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(); });
Improve this answer

1 Comment

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
1

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.

Improve this answer

3 Comments

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.