Question

有没有办法在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？有任何想法吗？

Answer 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>

Answer 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>

Answer 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
}

Answer 4

你可以通过添加＆＃34; onclick＆＃34;输入语句如下：

// 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>

从Button添加文本到TextArea

4 个答案: