Checkbox inserts text into textarea with Javascript

Question

I am trying to do something really simple using only Javascript (not JQuery). Basically, I want to use a checkbox to toggle the text in a textarea. So if the checkbox is unchecked I want it to say "Hello" in the textarea. If the checkbox is checked, the textarea should say "Goodbye". I'm just getting started with Javascript, so any help would be appreciated. Thanks

Here is the code:

var myswitch = document.getElementsByTagName("myonoffswitch");
var mytextarea= document.getElementsByTagName("mytextarea");
myswitch.onchange = function(){
      if(this.checked){
        mytextarea.value = "Hello"
      }else{
        mytextarea.value = "Goodbye"
    }
}

which tag is this in HTML myonoffswitch & mytextarea ? Post your markup as well that'll help. — Mritunjay
– Mritunjay, Commented Jul 24, 2014 at 2:43
Thanks for the answers everyone. They actually all work; I guess there are a lot of ways to do this in Javascript. — user3870923
– user3870923, Commented Jul 24, 2014 at 16:59

RobG · Accepted Answer · 2014-07-24 03:03:53Z

1

If your controls are in a form, you can do something really simple like:

<form>
  <textarea name="ta"></textarea>
  <input type="checkbox" onclick="
    this.form.ta.value = this.checked? 'Hello':'Goodbye';
  ">
</form>

Note that using the change event with a checkbox means that in some browsers, the event won't be dispatched until the checkbox loses focus, so better to use the click event.

answered Jul 24, 2014 at 3:03

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jasonscript · Accepted Answer · 2014-07-24 02:50:28Z

0

You should be using document.getElementById instead of getElementsByTagName

I can't tell from your code snippet if you've wrapped your code in an onload function. This is required in situations where your DOM elements are not loaded in the HTML at the time your javascript is running

Here's an example

window.onload = function () {
    var myswitch = document.getElementById("myonoffswitch");
    var mytextarea = document.getElementById("mytextarea");
    myswitch.onchange = function () {
        if (this.checked) {
            mytextarea.value = "Hello";
        } else {
            mytextarea.value = "Goodbye";
        }
    }
    //code here
}

And a fiddle is available here: http://jsfiddle.net/C4jVG/

answered Jul 24, 2014 at 2:50

jasonscript

6,2063 gold badges30 silver badges46 bronze badges

Comments

Mritunjay · Accepted Answer · 2014-07-24 02:50:36Z

0

I've tried something. This should work for you

HTML

<input type="checkbox" id="myonoffswitch">Switch</input>
<textarea id="mytextarea" cols="30" rows="10"></textarea>

Javascript

function fillText() {
        var myswitch = document.getElementById("myonoffswitch");
        var mytextarea= document.getElementById("mytextarea");
        myswitch.onchange = function(){
            if(this.checked){
                mytextarea.value = "Hello"
            }else{
                mytextarea.value = "Goodbye"
            }
        }
    }
    window.onload = fillText;

answered Jul 24, 2014 at 2:50

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Pbk1303 · Accepted Answer · 2014-08-16 05:22:10Z

0

Just try replacing getElementsByTagName in your code with getElementById this will solve your problem.

edited Aug 16, 2014 at 5:22

Pbk1303

3,7823 gold badges34 silver badges47 bronze badges

answered Jul 24, 2014 at 3:01

Devendra Soni

1,93412 silver badges16 bronze badges

Collectives™ on Stack Overflow

Checkbox inserts text into textarea with Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related