473,842 Members | 1,419 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

DOM setAttribute onClick

69 New Member
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.

Expand|Select|Wrap|Line Numbers
  1. <input type="button" value="Add New Section" onclick="javascript:addSection()" />
Expand|Select|Wrap|Line Numbers
  1. function editSection(divId) 
  2. {
  3.      alert( "Edit Invoked" );
  4.      ....
  5. }
  6.  
  7. function addSection()
  8. {
  9.      alert( "Add section" );
  10.      ....
  11.      ....
  12.     var editButton = document.createElement( 'input' );
  13.     editButton.type = "button";
  14.     editButton.value = "Edit";
  15.     editButton.setAttribute('onClick', editSection('id'));
  16.     ....
  17.     ....
  18. }
  19.  
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
Sep 11 '07 #1
13 32961
pbmods
5,821 Recognized Expert Expert
Heya, Sean.

Try encapsulating the function call in quotes:
Expand|Select|Wrap|Line Numbers
  1. editButton.setAttribute('onclick', "editSection('id');");
  2.  
You could alternatively do this:
Expand|Select|Wrap|Line Numbers
  1. editButton.setAttribute.onclick = function() { editSection('id'); };
  2.  
Sep 11 '07 #2
Sebarry
69 New Member
Works like magic!!!! You are an absolute star!!

Heya, Sean.

Try encapsulating the function call in quotes:
Expand|Select|Wrap|Line Numbers
  1. editButton.setAttribute('onclick', "editSection('id');");
  2.  
You could alternatively do this:
Expand|Select|Wrap|Line Numbers
  1. editButton.setAttribute.onclick = function() { editSection('id'); };
  2.  
Sep 11 '07 #3
Sebarry
69 New Member
Hi,

Your suggestion with the double quotes works great. The only problem I have now is that the id -
Expand|Select|Wrap|Line Numbers
  1. editSection('id')
- should be unique. I have a global variable - sectionCount - that I want to use to form a unique id -
Expand|Select|Wrap|Line Numbers
  1. 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
Sep 11 '07 #4
pbmods
5,821 Recognized Expert Expert
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).

Expand|Select|Wrap|Line Numbers
  1. var newId = parseInt(id) + sectionCount;
  2. editButton.setAttribute('onclick', "editSection('" + newId + "');");
  3.  
Sep 11 '07 #5
Sebarry
69 New Member
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).

Expand|Select|Wrap|Line Numbers
  1. var newId = parseInt(id) + sectionCount;
  2. editButton.setAttribute('onclick', "editSection('" + newId + "');");
  3.  
Sep 11 '07 #6
pbmods
5,821 Recognized Expert Expert
Heya, Sean.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)
Sep 11 '07 #7
Sebarry
69 New Member
Sorry me again. Works great in good old Firefox but not IE. Do I have to use code such as:

Expand|Select|Wrap|Line Numbers
  1. var editButton = document.createElement( 'input' );
  2. editButton.type = "button";
  3. editButton.value = "Edit";
  4.  
  5. if( editButton.addEventListener ) {
  6.   editButton.addEventListener('click',editSection('test'),false);
  7. } else if( editButton.attachEvent ) {
  8.   editButton.attachEvent('onclick',editSection('test'));
  9. }
  10.  
Instead of
Expand|Select|Wrap|Line Numbers
  1. 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 :)
Sep 11 '07 #8
pbmods
5,821 Recognized Expert Expert
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?
Sep 12 '07 #9
Sebarry
69 New Member
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:

Expand|Select|Wrap|Line Numbers
  1. var editButton = document.createElement( 'input' );
  2. editButton.type = "button";
  3. editButton.value = "Edit";
  4. editButton.setAttribute( 'onClick', "editSection('test');" );
  5.  
According to http://www.thescripts. com/forum/thread493656.ht ml
Expand|Select|Wrap|Line Numbers
  1. setAtrribute
doesn't work in IE, but I've tried
Expand|Select|Wrap|Line Numbers
  1. 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?
Sep 12 '07 #10

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

Similar topics

6
9829
by: Tim Johnson | last post by:
Hello All: Using javascript to dynamically add row elements to a table. as in ..... row.setAttribute("bgcolor",rowColor); // or cell.setAttribute("bgcolor",rowColor); Using firefox or netscape I'm seeing colors rendered as I would hope for. However the same process in Internet Explorer does render the
5
17720
by: johnsuth | last post by:
I want to produce a trivial demonstration of dynamic modification. I thought that pressing a button might change its color. I studied O'Reillys books and successfully created the button with a fancy style, but the onclick fails to do anything no matter what permutation of parameters I try. <input type=button style=background-color:yellow;color:blue;font-family:Arial;font-style:italic;font-weight:bold name="xyz" value="CHANGE COLOUR"...
21
39484
by: James Black | last post by:
I am curious if there is a benefit to set attributes directly, in my javascript, or to use setAttribute. For example, I have this: var input = document.createElementNS(xhtmlNS, 'input'); input.setAttribute('width', '20em'); I could have just called input.width='20em' When is each better to use, or is there no difference between them?
5
2260
by: gkelly | last post by:
Can someone explain what I am doing wrong, or why this will not work? I've tested this in IE6, Firefox 1.5 and Mozilla 1.7, all with the same result. Take for example this code: <html> <head> <script> function replace(){
11
2467
by: jesdynf | last post by:
I'm having trouble applying a stylesheet to content I'm generating after the fact. Here's the sample code: <html> <head> <title>CSS/DOM Problem Example</title> <style type="text/css"> ..historylinks {
4
5059
by: ICPooreMan | last post by:
I've got some code which works in firefox that's giving me fits in IE7 (maybe other versions too I haven't tested it). What I want to do is get the oncontextmenu attribute of something, change the value then put it back as the oncontextmenu attribute. Here's an example page if you want to try it out... <html> <head> <titletesting </title> <script><!--
1
3246
by: theS70RM | last post by:
yea i know there is millions of stuff about this on the net, and this isnt really a question but just wanted to see if people had picked up anything similar. This is only for internet explorer, firefox doesnt have any problem. i = 666; myImg = document.createElement("img"); myImg.setAttribute('onClick', 'doSomething(\'' +i+ '\');'); //this works
14
2588
by: Sri02 | last post by:
All, I was trying to add an onclick event using setAttribute to a <tdfrom javascript. Apparently the code doesnot seem to work in FF3 but works pretty well in IE7. Here is the snippet for ur reference: <... var _table=document.createElement("table"); _tbody=document.createElement("tbody");
0
9717
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10681
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9459
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7862
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5699
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5886
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4506
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4096
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3148
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.