javascript - 選択した関数を作成するには?

Question

私はそのような機能を実装しようとしています

1. を押すnon2と、印刷text2されますtextarea2
2. 次に を押すpos2と、 で印刷text2されtextarea1ます。

Here what I want is when I press pos2 then will be printed in text2 in textarea1 and text2 in textarea2 will be deleted. Conversely, if I hit pos2 first and hit non2 then print only text2 in textarea2.

I was thinking of using an if-else statement to see if one of POS or NON was clicked. This is what I ended up with:

<?php
    for ($j = 1; $j <= 3; $j++) {  
        echo '
            <div id="part'. $j .'" >
                <div id="teks'.$j.'">TEXT 2 </div>
                <input type="radio" id="pos'. $j .'" name="teks'.$j.'" value="POS" onclick="addPOS(this.previousElementSibling.innerHTML);">POS2</input>
                <input type="radio" id="non'. $j .'" name="teks'.$j.'" value="NON" onclick="addNON(this.previousElementSibling.previousElementSibling.innerHTML);">NON2</input>
                <input type="radio" id="neg'. $j .'" name="teks'.$j.'" value="NEG" checked="checked" onclick="delPOS(document.getElementById(\'teks'.$j.'\').innerHTML); delNON(document.getElementById(\'teks'.$j.'\').innerHTML);">NEG2</input>
            </div>
        ';
    }
?>   
<script type="text/javascript">
    function delPOS(elem)
    {
        var txt = document.getElementById("posbox").value;
        if (txt.length>elem.length){
            document.getElementById("posbox").value = txt.substr(0,txt.length-elem.length-1);
        }else{
            document.getElementById("posbox").value="";
        }
    }
    function delNON(elem)
    {
        var txt = document.getElementById("nonbox").value;
        if (txt.length>elem.length){
            document.getElementById("nonbox").value = txt.substr(0,txt.length-elem.length-1);
        }else{
            document.getElementById("nonbox").value="";
        }
    }
    function delNEG(elem)
    {
        var txt = document.getElementById("negbox").value;
        if (txt.length>elem.length){
            document.getElementById("negbox").value = txt.substr(0,txt.length-elem.length-1);
        }else{
            document.getElementById("negbox").value="";
        }
    }

    function addPOS(elem)
    {
        document.getElementById("posbox").value+=elem;
    }
    function addNON(elem)
    {
        document.getElementById("nonbox").value+=elem;
    }
    function addNEG(elem)
    {
        document.getElementById("negbox").value+=elem;
    }
</script>
<div id="box" >
    <textarea style="width:420px" name="posbox" id="posbox" rows="4" cols="70"></textarea>
    <textarea style="width:420px" name="nonbox" id="nonbox" rows="4" cols="70"></textarea>
    <textarea style="width:420px" name="negbox" id="negbox" rows="4" cols="70"></textarea>
</div>

However, this doesn't work. What am I doing wrong, and how can I fix it?

Answer 1

より簡単にします。ラジオの「名前」は、コンテンツを取得する div ID と同じであると仮定します。

...
<div id="teks'.$j.'">TEXT 2 </div>
<input type="radio" id="pos'. $j .'" name="teks'.$j.'" value="POS" 
   onclick="addPOS(this);">POS2</input>
<input type="radio" id="non'. $j .'" name="teks'.$j.'" value="NON" 
   onclick="addNON(this);">NON2</input>
...

あなたはただすることができます：

function addPOS(elem)
{
    document.getElementById("posbox").value+=document.getElementById(elem.name).innerHTML;
}