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, Apr 25 '09 at 22:41

score 40 · Accepted Answer · answered Apr 25 '09 at 22:20

40

Try this:

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

Steve

answered Apr 25 '09 at 22:20

Steve Harrison

121,227
16
87
72

Tried it, but the input didn't get the onclick property. What might be going on there? – Alex Apr 25 '09 at 22:29
How are you determining whether the input got the "onclick" function or not? – Steve Harrison Apr 25 '09 at 22:43
I go to FireBug and look in the "HTML" section if it has it. – Alex Apr 25 '09 at 23:27
3

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? – Steve Harrison Apr 25 '09 at 23:42

score 6 · Answer 2 · answered Apr 25 '09 at 22:28

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?

score 2 · Answer 3 · answered Apr 25 '09 at 22:21

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 '09 at 22:21

Peter Perháč

20,434
21
120
152

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. – Alex Apr 25 '09 at 22:31

score 1 · Answer 4 · answered Apr 25 '09 at 22:59

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 '09 at 22:59

tvanfosson

524,688
99
697
795

Add onclick property to input with JavaScript

4 Answers4

Linked