GetElementById("ta") does not update with change in <textarea id=ta> and visa versa

JavaScript
1

While this works in IE I just cant get it to work in Firefox. Any changes in the textarea are not passed on when you click the ‘doit’ button and the ‘addTxt’ button only works once. How can I get the ‘doit’ button to display the text entered into the textarea?

<html>
  <head>
    <script type="text/javascript">
    <!--
    function addTxt(){
      document.getElementById("ta").innerHTML = 'Some New Text';
      document.getElementById("p1").innerHTML = '';
    }
    function doit(){
        var txt = document.getElementById("ta").innerHTML;
        document.getElementById("p1").innerHTML = txt;
    }
    //-->
    </script>
  </head>
  <body>
    <input type="button" value="addTxt" onclick="addTxt()">
    <br>
    <textarea name="ta" id="ta" rows="2" cols="15">Txt</textarea>
    <br>
    <input type="button" value="doit" onclick="doit()">
    <br>
    <p name="p1" id="p1"></p>
  </body>
</html>

Thanks for any help. I have been experimenting with all kinds of variations but just cant get it to work. Is there some way of refreshing the textarea element without having to refresh the whole page?

2

Why not use document.getElementById("ta").value = 'Some New Text' and
var txt = document.getElementById("ta").value etc instead?

.innerHTML is non-standard, while .value is in the DOM spec.

3

Thanks a lot! That seems to work - although only if I use .value on the textarea. The .value on “p1” does not work:
works: document.getElementById(“ta”).value = ‘Some New Text’;
works: document.getElementById(“p1”).innerHTML = ‘’;
does not work: document.getElementById(“p1”).value = ‘’;

4

ta is a textarea and has a value attribute ('cos it’s part of a form).
p1 is a paragraph, and does not have a value.

So for ta you want to use .value and for p1 .innerHTML.

5

^ What Immerse said.

6

To further clarify what the others have said, only form controls (INPUT, BUTTON, TEXTAREA) can have “value” attributes.