JavaScript setAttribute on another element

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.

Could we see the rest of your html? Also, I'm rather confused on why you want to change an attribute to the same thing every time someone presses a key. — Daedalus
– Daedalus, Commented Jul 9, 2012 at 8:19
Well it's a Wordpress plugin, to completely post it here would be too much. The question is, if it's possible to do and if my idea the right one for. — kwoxer
– kwoxer, Commented Jul 9, 2012 at 8:30

Christoph · Accepted Answer · 2012-07-09 09:10:37Z

2

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.

edited Jul 9, 2012 at 9:10

answered Jul 9, 2012 at 8:42

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

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

18 Comments

Daedalus Over a year ago

You forgot to remove an errant quote in your fiddle, just a heads up.

kwoxer Over a year ago

You code is looking very well. But I don't know where to write it down. Could you help me. here is the full function.

Christoph Over a year ago

@kwoxer sry, that code looks incredibly messy. I can't see any element called "content" in that code. Does this work for you?

Christoph Over a year ago

@kwoxer if it doesn't - could you set up an example fiddle of how your page looks like and then we will tweak it accordingly.

kwoxer Over a year ago

Nop, and I want as I said the event on the content box, not on my "new" area. Hard to explain. You had already Wordpress and know the box when you are editing or creating something. I'm doing a screenshot.

|

Ricola3D · Accepted Answer · 2012-07-09 08:33:43Z

0

I'd say "setAttribute" won't work on a method. Try instead :

 document.getElementById('content').onkeypress = function() { document.getElementById('so_observer_heading_count').innerHTML = document.getElementById('content').value.length };

answered Jul 9, 2012 at 8:33

Ricola3D

2,46218 silver badges16 bronze badges

2 Comments

Daedalus Over a year ago

What method, precisely is the OP trying to use it on? I don't see any thing to that effect..

kwoxer Over a year ago

I want to parse a textbox for SEO optimization. Therefor I need a change event on the main box.

Daedalus · Accepted Answer · 2012-07-09 08:41:12Z

0

Well, there are certainly more.. efficient ways of doing this, but the thing you forgot to do was escape your single quotes, so the js treats your event as a string, instead of parsing the end result:

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

Elsewise.. I would personally do this through an included js file that executes the above line on document load/ready, versus every time a key is pressed.

Update: slight edit so anything I removed from your above code was added back, incase you want to just straight-copy it in.

edited Jul 9, 2012 at 8:41

answered Jul 9, 2012 at 8:33

Daedalus

7,7125 gold badges40 silver badges64 bronze badges

2 Comments

kwoxer Over a year ago

Unfortunately not working. And the thing is that I don't really want a keypress event on the 2. textarea. I need something diffrent like this from Cristoph

Daedalus Over a year ago

Cristoph's answer is the way to go.

Collectives™ on Stack Overflow

JavaScript setAttribute on another element

3 Answers 3

18 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

18 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related