如何在textarea中的现有文本旁边添加文本？

时间：2015-07-31 12:05:04

标签： javascript html function

[！[我想点击男性，它反映在性别：男性文本区域旁边） ]

我得到了这个脚本的例子，当我点击按钮上的男性时，我想要选项性别：在textbox内，如果我点击女性它就像男性一样紧挨着男性，女？ 

     <!DOCTYPE html>
      <head>
        <script>
        document.addEventListener('DOMContentLoaded', start, false);
            function start(){
                document.getElementById("button0").addEventListener("click", function(){insertText(this);} );
                document.getElementById("button1").addEventListener("click", function(){addText(this);} );
                document.getElementById("button2").addEventListener("click", function(){addText(this);} );
                document.getElementById("button3").addEventListener("click", function(){addText(this);} );
    document.getElementById("button4").addEventListener("click", function(){addText(this);} );

                function addText(elem) {

                    document.getElementById("ta1").innerHTML += elem.value;

                }
            };


    </script>
 </head>
 <body>


Gender

        <br>
        <input class="button" type="button" id="button0" value="Male"/>
        <input class="button" type="button" id="button1" value="Female" />
        <input class="button" type="button" id="button2" value="Not Required"/>
<br>

etc
<br/>
        <input class="button" type="button" id="button3" value=" 1 "/>

  <input class="button" type="button" id="button4" value="2"/>


<textarea id = "ta1" disabled rows="20" cols="80">
Gender: 
Etc:

 </textarea>

</body>
</html><html>

文本框图片：

enter image description here

2 个答案:

答案 0 :(得分：0)

您要做的是将文本存储在变量中并附加到该变量，每次单击其中一个按钮时更改文本区域的内容。您还必须确保如果他们返回到您点击的按钮，而您不会追加，而是更新之前提交的内容。

修改

基于@Alexis共享的示例函数，我写了这个工作示例：

<!DOCTYPE html>
 <head>
    <script>
    var genders = [];

    function btnGenderClick(value)
    {
        var options = ['Male','Female','Not Required'];
        genders.push(options[value]);
        document.getElementById("ta1").value= "Gender: " + genders.join() + "\nEtc:";
    }
    </script>
 </head>
 <body>


Gender

    <br>
    <button type="button" onClick="btnGenderClick(0)" name="Male">Male</button>
    <button type="button" onClick="btnGenderClick(1)" name="Female">Female</button>
    <button type="button" onClick="btnGenderClick(2)" name="NotRequired">Not Required</button>
<br>

etc
<br/>
    <input class="button" type="button" id="button3" value=" 1 "/>

  <input class="button" type="button" id="button4" value="2"/>


<textarea id = "ta1" disabled rows="20" cols="80">
Gender: 
Etc:

 </textarea>

</body>
</html><html>

我唯一不明白的是Etc：是什么以及你想把它放在那里。

答案 1 :(得分：0)

修改代码我测试：

<script>
function btnGenderClick(type,value)
{
    document.getElementById("test").value+= type+" : "+value+'\r';
}
</script>
<input type="button" value="Male" onClick="btnGenderClick('Gender','Male')" name="Male">
<input type="button" value="Female" onClick="btnGenderClick('Gender','Female')" name="Female">
<input type="button" value="Not required" onClick="btnGenderClick('Gender','Not required')" name="NotRequired">
<textarea id="test"></textarea>
相关问题
最新问题