CODEWITHSUNDEEP
htmlbuttontextarea
user2456977
user2456977

Reputation: 3964

Add text to TextArea from Button

Is there a way to set text in a TextArea? I have four Buttons and when I click on a Button I want the text in the Button to appear in the TextArea.

Here is my code:

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

I thought of creating a method displayText(e) that collects the Button text and sets it in the TextArea. But I am not sure how to access the Button text. And once I get the text, how do I save it in the TextArea? Any ideas?

Upvotes: 0

Views: 4079

Answers (4)

Ryan
Ryan

Reputation: 747

for each button, give an onclick to a separate function and have each function look something like this:

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
}

Upvotes: 0

Dave Cribbs
Dave Cribbs

Reputation: 859

So do you mean like this?

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

Upvotes: 3

nathanwww
nathanwww

Reputation: 109

You could do it by adding "onclick" to the input statement as follows: 

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

Upvotes: -1

intrigatory57
intrigatory57

Reputation: 98

Use the .value property to display preset text into a text area.

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

Upvotes: 1

Related Questions