javascript - 如何将多个单选列表按钮复制到文本区域并将骨架更改为声音

Question

我不知道从哪里开始，所以来到这里学习如何做。

我有以下广播列表和文本区域(#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/>

可以在这里找到 JSFiddle https://jsfiddle.net/Lpm38noj/2/

好的，现在我要做的是添加以下内容以匹配上述值。
1. Top = Tah, Dah
2. Nose =不行
3. 嘴=麻
4. 肋骨 = Rah
5. 肝脏 = Lah
6. 关节 = Juh, Shuh, Chuh
7. Cap = Cah, Kah, Gah
8. 腓骨 = Fah, Vah
9.球=呸，呸
0. 海 = Sah, Zah 等..

因此，如果我从 3 个单选列表中选择 1 个单选按钮，例如在文本区域中有 146 个单选按钮，它会说:

编辑:更新 我想要 1. 4. 6. 而不是 123 对不起，我确实有下面的数字，但是 stackoverflow 编号列表改变了我的数字。

1. 哒哒哒
2. 拉赫
3. 朱、舒、楚

文本区域内的 3 个单选按钮的 3 行。我希望这是有道理的？

我不知道该怎么做，我什至不知道从哪里开始。 :(

干杯， 丹

Answer 1

这是我使用纯 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;
}

由于您之前的问题与简化代码有关，如果您将第一个 radio 名称设为 skeleton1 而不仅仅是 skeleton，我们可以将 textarea 更新函数简化为:

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/

编辑

所以这是一个显示单选按钮索引的更新，因此您可以根据需要获得 146。我添加了一个新函数来确定单选按钮的索引:

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

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