DOM setAttribute onClick

[Sebarry]

Hi,

I have a form with an add button that when clicked should create a new textarea with edit and delete buttons and append it to the form. Both the edit and delete buttons need to respond to onClick events. Here's the code I have so far.

<input type="button" value="Add New Section" onclick="javascript:addSection()" />

function editSection(divId) 
{
     alert( "Edit Invoked" );
     ....
}
 
function addSection()
{
     alert( "Add section" );
     ....
     ....
    var editButton = document.createElement( 'input' );
    editButton.type = "button";
    editButton.value = "Edit";
    editButton.setAttribute('onClick', editSection('id'));
    ....
    ....
}
 

The addSection function is invoked when the add button is clicked and this creates the edit button only, so far. However, when the onClick event is set for the edit button it invokes the editSection, which it should when the edit button is clicked, but it hasn't been clicked yet it's only be created.

Any ideas?

Thanks,

Sean

[pbmods]

Heya, Sean.

Try encapsulating the function call in quotes:

editButton.setAttribute('onclick', "editSection('id');");
 

You could alternatively do this:

editButton.setAttribute.onclick = function() { editSection('id'); };
 

[Sebarry]

Works like magic!!!! You are an absolute star!!

Heya, Sean.

Try encapsulating the function call in quotes:

editButton.setAttribute('onclick', "editSection('id');");
 

You could alternatively do this:

editButton.setAttribute.onclick = function() { editSection('id'); };
 

[Sebarry]

Hi,

Your suggestion with the double quotes works great. The only problem I have now is that the id -

editSection('id')

- should be unique. I have a global variable - sectionCount - that I want to use to form a unique id -

editSection('id' + sectionCount)

- but this doesn't appear to form a string of id0, id1, id2 etc instead it forms the string whenever its used. Thus if I increment sectionCount the id is now id1 instead of id0 and id1 does not exist.

Any ideas?

Thanks,

Sean

[pbmods]

Heya, Sean.

Try calculating the ID before adding it to the string. This will probably work better for you in the long run anyway, as then you are passing a constant value instead of relying on id not to change (long story, you can get a partial answer in this article).

var newId = parseInt(id) + sectionCount;
editButton.setAttribute('onclick', "editSection('" + newId + "');");
 

[Sebarry]

Thanks again mate. That works perfectly.

Heya, Sean.

Try calculating the ID before adding it to the string. This will probably work better for you in the long run anyway, as then you are passing a constant value instead of relying on id not to change (long story, you can get a partial answer in this article).

var newId = parseInt(id) + sectionCount;
editButton.setAttribute('onclick', "editSection('" + newId + "');");
 

[pbmods]

Heya, Sean.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)

[Sebarry]

Sorry me again. Works great in good old Firefox but not IE. Do I have to use code such as:

var editButton = document.createElement( 'input' );
editButton.type = "button";
editButton.value = "Edit";
 
if( editButton.addEventListener ) {
  editButton.addEventListener('click',editSection('test'),false);
} else if( editButton.attachEvent ) {
  editButton.attachEvent('onclick',editSection('test'));
}
 

Instead of

editButton.setAttribute('onClick', "javascript:editSection('newsection" + sectionCount + "');");

. I get an object error in a try/catch block when I use the IE code but at least it actually calls the editSection() function. It again calls it before I want to so I guess the quotes are in order again but is the above IE right? and will it also work on FireFox?

Cheers,

Sean

Heya, Sean.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)

[pbmods]

Heya, Sean.

Not to ask an obvious question... but you *are* setting the ID of each new element that you are creating to match up with what you're passing to the onclick handler, yes?

[Sebarry]

Hi,

No unfortunately I'm not. In fact at the moment I don't think it matters because I'm setting the onclick event to just the name of the function and the string test, just to try and get it to invoke the function.

What I have been using is:

var editButton = document.createElement( 'input' );
editButton.type = "button";
editButton.value = "Edit";
editButton.setAttribute( 'onClick', "editSection('test');" );
 

According to http://www.thescripts.com/forum/thread493656.html

setAtrribute

doesn't work in IE, but I've tried

editButton.onclick = "editSection('test');";

and that doesn't work.

Hope you can help.

Sean

Heya, Sean.

Not to ask an obvious question... but you *are* setting the ID of each new element that you are creating to match up with what you're passing to the onclick handler, yes?

[acoder]

According to http://www.thescripts.com/forum/thread493656.html

setAtrribute

doesn't work in IE, but I've tried

editButton.onclick = "editSection('test');";

and that doesn't work.

Try:

editButton.onclick = function() { editSection('test'); };

[Sebarry]

Hi,

That works great and fixes it on IE, but what I need to do now is pass a string concatenated with a number i.e

editButton.onclick = function() { editSection('test' + count)}

but so it evaluates count now, not later. Earlier in the thread pbmods had provided

editButton.setAttribute('onClick', "editSection('test" + count + "');");

. I can't seem to do the same thing for

editButton.onclick = function()

.

Thanks,

Sean

Try:

editButton.onclick = function() { editSection('test'); };

[acoder]

Try setting a variable to the value that you want to pass to the function and then pass that instead:

var testNum = 'test'+count;
editButton.onclick = function() { editSection(testNum);}

[pbmods]

That won't work because the value of the count variable will be different by the time the function executes.

Instead, try using this:

editButton.onclick = function() { editSection(this); }
 

When editButton gets clicked, editSection() will get called with this as the first parameter, and in the context of the event, this will be a reference to the element that was clicked (remember: the function won't be evaluated until editButton's click event fires).