0

This should be a simple question but I have hard time finding why the issue happens.

I have the following code:

<html>
<Head>

</Head>
<Body>

<textarea id="rrr" rows="5" cols="40" maxlenght="50" onmouseup="myfunction()"></textarea>

<script>

function myfunction(){

document.getElementById("rrr").innerHTML="test";

}


</script>

    </Body>
</html>

This code works only once! when I load the page and do a mouseup on textarea, i will see the word "test".

Then I delete the textarea's text and click on it again and nothing happens. Why?

S Nash
  • 2,363
  • 3
  • 34
  • 64

2 Answers2

3

Change innerHTML to value:

function myfunction() {
    document.getElementById("rrr").value = "test";
}

jsFiddle example

And a minor note, you have a typo in maxlenght.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • +1, OK this works. But do you any ideas why innerHTML only works once? My guess is browser may cache it and prevent it. does not make any sense. – S Nash Nov 18 '14 at 17:03
  • Actually if you inspect the element and watch the DOM, you'll see that the innerHTML attribute is continually being updated on every mouseup, however you want to change the value property. You can read about the details at https://html.spec.whatwg.org/multipage/forms.html#dom-textarea-value and – j08691 Nov 18 '14 at 17:15
-3

This code causes that function to be executed once, the first time the mouseup event is fired:

onmouseup="myfunction()"

This code on the other hand, assigns myfunction as the event handler for the mouseup event, so it will be called each time the event is fired.

onmouseup="myfunction"
Greg Lafrance
  • 768
  • 1
  • 7
  • 18
  • See http://stackoverflow.com/questions/20485425/why-in-javascript-event-handler-functions-with-parentheses – j08691 Nov 18 '14 at 17:03