从 Button 向 TextArea 添加文本答案

【问题标题】：Add text to TextArea from Button从 Button 向 TextArea 添加文本
【发布时间】：2014-11-17 01:27:51
【问题描述】：

有没有办法在TextArea 中设置文本？我有四个Buttons，当我单击Button 时，我希望Button 中的文本出现在TextArea 中。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="practice.css">

<script>
var elem = document.getElementById('ta1');

function displayText(e){
    elem.setText(elem.getText());
}

</script>
</head>
<body>
    <div>
        <input class="button" type="button" id="button0" value="testing1"/>
        <input class="button" type="button" id="button1" value="testing2" />
        <input class="button" type="button" id="button2" value="testing3"/>
        <input class="button" type="button" id="button3" value="testing4"/>

    </div>


    <textarea id = "ta1" disabled rows="3" cols="50"></textarea>
</body>
</html>

我想创建一个方法displayText(e) 来收集Button 文本并将其设置在TextArea 中。但我不确定如何访问 Button 文本。得到文本后，如何将其保存在TextArea 中？有任何想法吗？

【问题讨论】：

标签： html button textarea

【解决方案1】：

所以你的意思是这样的？

    <!DOCTYPE html>
  <head>
    <script>
    document.addEventListener('DOMContentLoaded', start, false);
        function start(){
            document.getElementById("button0").addEventListener("click", function(){addText(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);} );

            function addText(elem) {

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

            }
        };


    </script>
 </head>
 <body>

 <textarea id = "ta1" disabled rows="3" cols="50">
 </textarea>

        <br>
        <input class="button" type="button" id="button0" value="testing1"/>
        <input class="button" type="button" id="button1" value="testing2" />
        <input class="button" type="button" id="button2" value="testing3"/>
        <input class="button" type="button" id="button3" value="testing4"/>



</body>
</html><html>

【讨论】：

是的，这很有帮助！但是你知道为什么我不能把所有的 document.ElementById 都放在部分吗？代码不起作用。但是我可以在中使用 addText 函数
谢谢，但你能解释一下为什么它不能在 head 标签中工作吗？只是为了理解在 head 标签和 body 标签中声明的区别
它不起作用，因为尚未加载 html 内容。听众没有工作，因为按钮还不存在。通过添加document.addEventListener('DOMContentLoaded',start, false);它监听html是否加载，然后运行函数start()

【解决方案2】：

使用 .value 属性将预设文本显示到文本区域中。

 <!DOCTYPE html>
 <html>
 <body>

 <textarea id="demo" cols="10" rows="20">
 </textarea>

 <script>

 var cars = ["Saab", "Volvo", "BMW"];
 for(var i = 0; i < cars.length;i++){
      document.getElementById("demo").value += " " + cars[i];
 }
 </script>

</body>
</html>

【讨论】：

【解决方案3】：

对于每个按钮，给一个单独的函数一个 onclick 并让每个函数看起来像这样：

function button1 () {
    var node = document.createTextNode(x); /*var x, or whatever you want the variable
    to be called will be the text  you want it to display. You will have to define this in
    an earlier variable already defined*/
    var container = document.getElementById("ta1");
    container.appendChild(node); //Appends text node to inside the TA
}

【讨论】：

【解决方案4】：

您可以通过在输入语句中添加“onclick”来实现，如下所示：

// add **onclick="function()"** to the button
<div>
<input class="button" type="button" id="button0" value="testing1" onclick="addText1"/>
<input class="button" type="button" id="button1" value="testing2" onclick="addText2"/>
<input class="button" type="button" id="button2" value="testing3" onclick="addText3"/>
<input class="button" type="button" id="button3" value="testing4" onclick="addText4"/>
</div>

// use stylesheet for positioning, etc.
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>

//now when you click the button, it will call the respective function in the script

<script>
var text1 = "Enter text 1";
var text2 = "Enter text 2";
var text3 = "Enter text 3";
var text4 = "Enter text 4";
function addText1(){document.getElementById("text1").innerHTML += text1;}
function addText2(){document.getElementById("text1").innerHTML += text2;}
function addText3(){document.getElementById("text1").innerHTML += text3;}
function addText4(){document.getElementById("text1").innerHTML += text4;}
</script>

【讨论】：