js generated input button not working

[bning]

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 :

var newDelete = document.createElement('input');
newDelete.setAttribute('type', 'button');
newDelete.setAttribute('value', 'delete');
newDelete.setAttribute('onclick', 'test();');

I then insert it into the correct place in the table :

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 :

<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.

[gits]

hi ...

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

var click_handler = function(this) {
    alert(this.nodeName);
};
 
newDelete.onclick = click_handler;

kind regards

[mrhoo]

You were pretty close.

var B= document.createElement('input')
B.type= 'button';
B.value= 'Delete';
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.

function getCell(t,r,c){
    t= document.getElementsByTagName('table')[t-1];
    r= t.getElementsByTagName('tr')[r-1];
    var tem,i= 0;
    while(r.childNodes[i] && c>0){
        tem= r.childNodes[i];
        if(/^(td|th)$/i.test(tem.nodeName)){
            if(--c== 0) return tem;
        }
        ++i;
    }
    return null;
}

To add the button defined above to the first table, third row, fourth cell:

getCell(1,3,4).appendChild(B);

[dmjpro]

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 :

var newDelete = document.createElement('input');
newDelete.setAttribute('type', 'button');
newDelete.setAttribute('value', 'delete');
newDelete.setAttribute('onclick', 'test();');

I then insert it into the correct place in the table :

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 :

<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 ...............

<td id = "some_id"></td>
 

function addChild()
{
 var ref = document.createElement("input");
 ref.setAttribute("type","text");
 .
 .
 typeof window.attachEventListener ? ref.attachEventListener("click",test,true) : ref.addEventListener("onclick",test);
 document.getElementById('some_id').appendChild(ref);
}
function test()
{
//some code
}
 

Debasis Jana

[ajos]

<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-->

<INPUT type="button" value="delete" onclick="test()">
 

just give it a try:)
regards,
ajos

[bning]

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!

[bning]

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.

[dmjpro]

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

[bning]

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.

var newDelete = document.createElement('input');
newDelete.type = 'button';    
newDelete.name = 'row2';
newDelete.value = 'delete';
newDelete.onclick = test;
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.

[dmjpro]

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.

var newDelete = document.createElement('input');
newDelete.type = 'button';    
newDelete.name = 'row2';
newDelete.value = 'delete';
newDelete.onclick = test;
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?

.
.
button_ref.setAttribute("id","some_id");
.
.
function test()
{
 alert(document.getElementById("some_id").getAttribute("name"));
}
 

Debasis Jana

[bning]

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.

[gits]

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

[dmjpro]

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.

function test()
{
 alert(event.srcElement.name);
}
 

Debasis Jana

[gits]

:) now ... simply combine the last two posts :))

kind regards

[dmjpro]

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

[gits]

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

[dmjpro]

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

[bning]

Thanks guys! Working perfectly now :)

[gits]

hi ...

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

kind regards