Add onclick property to input with JavaScript

Question

I am creating a user input at one of the events:

var throwConnectBox = function() {
    chat_box = document.getElementById('box');
    div = window.parent.document.createElement('div');
    input = window.parent.document.createElement('input');
    input.type = "submit";
    input.value = "Join chat";
    input.onclick = "conn.send('$connect\r\n');";
    div.appendChild(input);
    chat_box.appendChild(div);
}

... but the resulting input does not have onclick property. I tried to use

    input.onclick = conn.send('$connect\r\n');

... instead, but didn' work either. What am I doing wrong?

Have you already declared all of those variables? If not, you're using "implied globals" which isn't very good—make them local variables by declaring them with the "var" keyword. — Steve Harrison
– Steve Harrison, Commented Apr 25, 2009 at 22:41

Steve Harrison · Accepted Answer · 2009-04-25 22:20:30Z

41

Try this:

 input.onclick = function() { conn.send('$connect\r\n'); };

Steve

answered Apr 25, 2009 at 22:20

Steve Harrison

126k17 gold badges89 silver badges73 bronze badges

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

4 Comments

Alex Over a year ago

Tried it, but the input didn't get the onclick property. What might be going on there?

Steve Harrison Over a year ago

How are you determining whether the input got the "onclick" function or not?

Alex Over a year ago

I go to FireBug and look in the "HTML" section if it has it.

Steve Harrison Over a year ago

Interesting. I quickly tried creating an element with an "onclick" handler and adding it to the DOM, and it didn't show up in the HTML section (but the onclick handler was there and working). Try adding an ID attribute to the input (let's assume the ID is "test"), and execute the following code (without the single quotes) in Firebug's console: 'document.getElementById("test").onclick'. Do you get back a function?

Billy Back Bedroom · Accepted Answer · 2009-04-25 22:28:33Z

6

There is a problem with one of your lines here; I've corrected it for you:

 var throwConnectBox = function() {
     chat_box = document.getElementById('box');
     div = window.parent.document.createElement('div');
     input = window.parent.document.createElement('input');
     input.type = "submit";
     input.value = "Join chat";
     /* this line is incorrect, surely you don't want to create a string? */
     // input.onclick = "conn.send('$connect\r\n');";?
     input.onclick = function() { 
         conn.send('$connect\r\n'); 
     };
     div.appendChild(input);
     chat_box.appendChild(div);
 }

Does that make more sense?

answered Apr 25, 2009 at 22:28

community wiki

Billy Back Bedroom

Comments

Peter Perháč · Accepted Answer · 2009-04-25 22:21:34Z

2

I think you may want to escape the \r\n, if you intend to pass these...

conn.send('$connect\\r\\n')

I don't quite see what your onclick handler tries to achieve...

answered Apr 25, 2009 at 22:21

Peter Perháč

20.8k23 gold badges129 silver badges153 bronze badges

1 Comment

Alex Over a year ago

Ah, no problem with that, it works fine (it sends a line via a TCP socket). I'm actually stuck with attaching the onclick property to the input tag.

tvanfosson · Accepted Answer · 2009-04-25 22:59:47Z

1

This is one of the reasons why I've decided to use jQuery:

 $('<input type="submit" value="Join chat" />')
      .click( function() { conn.send('$connect\r\n'); } )
      .appendTo('<div></div>')
      .appendTo('#box');

answered Apr 25, 2009 at 22:59

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

Add onclick property to input with JavaScript

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related