By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,934 Members | 1,449 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,934 IT Pros & Developers. It's quick & easy.

js generated input button not working

P: 8
Hmm this forum really doesn't give you long enough to type in your question before logging you out.. well here goes my second attempt:

I'm trying to teach myself javascript with dom scripting and am attempting to write an application as I learn. It's been going fine but I've ran into a problem which is driving me crazy.

I'll start off by explaining what I'm trying to achieve... I'm simply trying to insert an input button into a table at a specific place which calls a function when clicked. For examples sake I'm trying to place it into row 3, column 4 of the table.

So I started off by creating an button that called the javascript to insert that button. This works fine. In the script I first define the new element like so :

Expand|Select|Wrap|Line Numbers
  1. var newDelete = document.createElement('input');
  2. newDelete.setAttribute('type', 'button');
  3. newDelete.setAttribute('value', 'delete');
  4. newDelete.setAttribute('onclick', 'test();');
I then insert it into the correct place in the table :

Expand|Select|Wrap|Line Numbers
  1. document.getElementsByTagName('table')[0].firstChild.childNodes[2].childNodes[3].appendChild(newDelete);
I realise there are probably better ways to find the correct 'td' in the table but I'm a newbie.

At first it appears to run fine... I click the static button, and the new button appears in the table at the correct position. You can even click the button!!! However, clicking the button does not call the test() function as expected. Looking at the generated html the button looks ok :

Expand|Select|Wrap|Line Numbers
  1. <INPUT onclick=test(); type=button value=delete>
To test whether it was a problem with the html generated I copied the button html into a separate html page and opened it. The button appeared... clicking it called the test() function!

So even though these two buttons are effectively the same... clicking the dynamically generated button does not call the test() function... while clicking the static one does...

Any help would be greatly appreciated!

Ben.
Oct 4 '07 #1
Share this Question
Share on Google+
18 Replies


gits
Expert Mod 5K+
P: 5,371
hi ...

try to not use the setAttribute-method for it ... use something like that:

Expand|Select|Wrap|Line Numbers
  1. var click_handler = function(this) {
  2.     alert(this.nodeName);
  3. };
  4.  
  5. newDelete.onclick = click_handler;
kind regards
Oct 4 '07 #2

100+
P: 428
You were pretty close.

Expand|Select|Wrap|Line Numbers
  1. var B= document.createElement('input')
  2. B.type= 'button';
  3. B.value= 'Delete';
  4. B.onclick= test;  // reference the function, don't call() it  here
.


Finding a particular cell in a table is a common and tiresome task, you might want a function just for that.
Expand|Select|Wrap|Line Numbers
  1. function getCell(t,r,c){
  2.     t= document.getElementsByTagName('table')[t-1];
  3.     r= t.getElementsByTagName('tr')[r-1];
  4.     var tem,i= 0;
  5.     while(r.childNodes[i] && c>0){
  6.         tem= r.childNodes[i];
  7.         if(/^(td|th)$/i.test(tem.nodeName)){
  8.             if(--c== 0) return tem;
  9.         }
  10.         ++i;
  11.     }
  12.     return null;
  13. }
To add the button defined above to the first table, third row, fourth cell:

getCell(1,3,4).appendChild(B);
Oct 5 '07 #3

dmjpro
100+
P: 2,476
Hmm this forum really doesn't give you long enough to type in your question before logging you out.. well here goes my second attempt:

I'm trying to teach myself javascript with dom scripting and am attempting to write an application as I learn. It's been going fine but I've ran into a problem which is driving me crazy.

I'll start off by explaining what I'm trying to achieve... I'm simply trying to insert an input button into a table at a specific place which calls a function when clicked. For examples sake I'm trying to place it into row 3, column 4 of the table.

So I started off by creating an button that called the javascript to insert that button. This works fine. In the script I first define the new element like so :

Expand|Select|Wrap|Line Numbers
  1. var newDelete = document.createElement('input');
  2. newDelete.setAttribute('type', 'button');
  3. newDelete.setAttribute('value', 'delete');
  4. newDelete.setAttribute('onclick', 'test();');
I then insert it into the correct place in the table :

Expand|Select|Wrap|Line Numbers
  1. document.getElementsByTagName('table')[0].firstChild.childNodes[2].childNodes[3].appendChild(newDelete);
I realise there are probably better ways to find the correct 'td' in the table but I'm a newbie.

At first it appears to run fine... I click the static button, and the new button appears in the table at the correct position. You can even click the button!!! However, clicking the button does not call the test() function as expected. Looking at the generated html the button looks ok :

Expand|Select|Wrap|Line Numbers
  1. <INPUT onclick=test(); type=button value=delete>
To test whether it was a problem with the html generated I copied the button html into a separate html page and opened it. The button appeared... clicking it called the test() function!

So even though these two buttons are effectively the same... clicking the dynamically generated button does not call the test() function... while clicking the static one does...

Any help would be greatly appreciated!

Ben.

Have a look at this ...............
Expand|Select|Wrap|Line Numbers
  1. <td id = "some_id"></td>
  2.  
Expand|Select|Wrap|Line Numbers
  1. function addChild()
  2. {
  3.  var ref = document.createElement("input");
  4.  ref.setAttribute("type","text");
  5.  .
  6.  .
  7.  typeof window.attachEventListener ? ref.attachEventListener("click",test,true) : ref.addEventListener("onclick",test);
  8.  document.getElementById('some_id').appendChild(ref);
  9. }
  10. function test()
  11. {
  12. //some code
  13. }
  14.  
Debasis Jana
Oct 5 '07 #4

100+
P: 283

Expand|Select|Wrap|Line Numbers
  1. <INPUT onclick=test(); type=button value=delete>
Ben.
hey ben,
i doubt the way you ve declared the above line,though im not sure abt wat you are doing with this, i think you shud do something like this-->
Expand|Select|Wrap|Line Numbers
  1. <INPUT type="button" value="delete" onclick="test()">
  2.  
just give it a try:)
regards,
ajos
Oct 5 '07 #5

P: 8
Thanks for all your quick replies! Eliminating the setAttributes and referencing the function rather than calling it (thanks mrhoo!) made the button work finally. And that cell finding function will no doubt save me a LOT of time.

Thanks again everyone!
Oct 5 '07 #6

P: 8
Hmmm another problem hehe...

this example required no values be be passed to the test function ... however the actual application needs the name of the input button to be passed to the test function... now as adding (this.name) to the onclick attribute causes loss of function to the button... how might I achieve this?

Ben.
Oct 5 '07 #7

dmjpro
100+
P: 2,476
Hmmm another problem hehe...

this example required no values be be passed to the test function ... however the actual application needs the name of the input button to be passed to the test function... now as adding (this.name) to the onclick attribute causes loss of function to the button... how might I achieve this?

Ben.
Post your Code and tell what you are not achieving.

Debasis Jana
Oct 5 '07 #8

P: 8
The real application lets you enter values into a form then click a button which then adds a row to a table containing these values. A button is the added to the end of the row which when clicked deletes this row. Now when I create the row I will assign the postion of the row in the table as its name attribute, and ideally when this delete button is clicked it will pass its name to a function so the function knows which row to delete.

Expand|Select|Wrap|Line Numbers
  1. var newDelete = document.createElement('input');
  2. newDelete.type = 'button';    
  3. newDelete.name = 'row2';
  4. newDelete.value = 'delete';
  5. newDelete.onclick = test;
  6. document.getElementsByTagName('table')[0].firstChild.childNodes[emptyRowNum].childNodes[5].appendChild(newDelete);
The above code creates the delete button. As discussed above the dynamically created button will not call the test function if the onclick attribute is assigned as 'test()' but will work when its assigned as 'test'. However, this will not allow me to pass the name of the input button to the test function by using 'test(this.name)'.

Any help would be greatly appreciated .

Ben.
Oct 5 '07 #9

dmjpro
100+
P: 2,476
The real application lets you enter values into a form then click a button which then adds a row to a table containing these values. A button is the added to the end of the row which when clicked deletes this row. Now when I create the row I will assign the postion of the row in the table as its name attribute, and ideally when this delete button is clicked it will pass its name to a function so the function knows which row to delete.

Expand|Select|Wrap|Line Numbers
  1. var newDelete = document.createElement('input');
  2. newDelete.type = 'button';    
  3. newDelete.name = 'row2';
  4. newDelete.value = 'delete';
  5. newDelete.onclick = test;
  6. document.getElementsByTagName('table')[0].firstChild.childNodes[emptyRowNum].childNodes[5].appendChild(newDelete);
The above code creates the delete button. As discussed above the dynamically created button will not call the test function if the onclick attribute is assigned as 'test()' but will work when its assigned as 'test'. However, this will not allow me to pass the name of the input button to the test function by using 'test(this.name)'.

Any help would be greatly appreciated .

Ben.
Is that necessary to pass that?

Expand|Select|Wrap|Line Numbers
  1. .
  2. .
  3. button_ref.setAttribute("id","some_id");
  4. .
  5. .
  6. function test()
  7. {
  8.  alert(document.getElementById("some_id").getAttribute("name"));
  9. }
  10.  
Debasis Jana
Oct 5 '07 #10

P: 8
There would be one delete button for each row in the table. Clicking the button on a row should delete that row and no others. Even assigning a unqiue id to each button would not allow the test function to know which button had called it unless I could pass it a variable? Although I'm probably missing something.
Oct 5 '07 #11

gits
Expert Mod 5K+
P: 5,371
hi ...

you may use the event-obj for this ... here i show you the standards-compliant method:

[HTML]
<script type="text/javascript">
function add_click() {
var newDelete = document.getElementById('test');

var click_handler = function(e) {
var obj = e.target;

alert(obj.name);
};

newDelete.onclick = click_handler;
}
</script>

<body onload="add_click();">
<input type="button" id="test" name="test_button" value="click_me"/>
</body>
[/HTML]

note: IE has no e.target but srcElement ... so it has to be adapted for cross-browser-capabilities

kind regards
Oct 5 '07 #12

dmjpro
100+
P: 2,476
There would be one delete button for each row in the table. Clicking the button on a row should delete that row and no others. Even assigning a unqiue id to each button would not allow the test function to know which button had called it unless I could pass it a variable? Although I'm probably missing something.
Sorry you can do it another way ........ :-)
Without having my code, i said earlier.
Actually it is possible in IE....I tested that in Mozilla i failed.

Expand|Select|Wrap|Line Numbers
  1. function test()
  2. {
  3.  alert(event.srcElement.name);
  4. }
  5.  
Debasis Jana
Oct 5 '07 #13

gits
Expert Mod 5K+
P: 5,371
:) now ... simply combine the last two posts :))

kind regards
Oct 5 '07 #14

dmjpro
100+
P: 2,476
hi ...

you may use the event-obj for this ... here i show you the standards-compliant method:

[HTML]
<script type="text/javascript">
function add_click() {
var newDelete = document.getElementById('test');

var click_handler = function(e) {
var obj = e.target;

alert(obj.name);
};

newDelete.onclick = click_handler;
}
</script>

<body onload="add_click();">
<input type="button" id="test" name="test_button" value="click_me"/>
</body>
[/HTML]

note: IE has no e.target but srcElement ... so it has to be adapted for cross-browser-capabilities

kind regards
Does browser send the event object when an event fired up :-)

Debasis Jana
Oct 5 '07 #15

gits
Expert Mod 5K+
P: 5,371
Does browser send the event object when an event fired up :-)

Debasis Jana
in case this is a question the answer is yes ... except IE which has a global event-object.

kind regards
Oct 5 '07 #16

dmjpro
100+
P: 2,476
in case this is a question the answer is yes ... except IE which has a global event-object.

kind regards
Oh right now I can understand......
Actually why I was unable to use "event" without passing it in Mozilla.
Really you are very impressive man :-)

Debasis Jana
Oct 5 '07 #17

P: 8
Thanks guys! Working perfectly now :)
Oct 5 '07 #18

gits
Expert Mod 5K+
P: 5,371
hi ...

glad to hear that :) ... post back to the forum anytime you have more questions ...

kind regards
Oct 5 '07 #19

Post your reply

Sign in to post your reply or Sign up for a free account.