Question

I have a problem to set an attribute on another element.

I’m using PHP code with JS and HTML and it looks like:

<textarea name='$id' id='$id' class='regular-text' cols='60' rows='1' tabindex='2'"
            . "onkeypress =\"javascript:document.getElementById('content').setAttribute('onkeypress', document.getElementById('so_observer_heading_count').innerHTML = document.getElementById('content').value.length)\">$value</textarea>

You must know I have 2 elements. The first(‘content’) one I use for writing a text and in the other one(‘so_observer_heading_count’) there shall be updated the number of signs from the first element.

So my question is, how can I set an attribute on another element.

I have already checked that the name is correct and when i change the content of the textarea on the 2. element I get the right amount from the first element. But I want only to change content in the first element to refresh the amount.

And I don’t want to change the code of the first element! And don’t be confused by the textarea, in future this shall be a label or something else.

Answer 1

First of all:

Don’t use the inline-eventbindings. Always use “real” javascript, (this way you also prevent the problem of escaping your quotes) this is far more cleaner and more maintanable.

Also you code has another problem: You have an eventhandler “keypress” on the textarea, which binds on every “keypress” another attribute to your content-element. This is not very performant and most likey won’t work properly. This code should be everything you need:

document.getElementById('content').addEventListener("keyup",function(){

    var obs  = document.getElementById('so_observer_heading_count');    

    obs.innerHTML = this.value.length;

});​

Here is a demo for you.

Edit: I changed the event from keypress to keyup to 1) count properly 2) take charakter deletion into account.