473,856 Members | 1,403 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

DOM-dynamically-created HTML buttons and function argument passing problem

1 New Member
Buddies,
I have a web page to create HTML buttons dynamically as in the “formDivColorPi cker” function

Expand|Select|Wrap|Line Numbers
  1. //////////////////////////////////////////////////////////////////////////////////// version 1 : using global variables ////////////////////////////////////////////////////////////////// 
  2. var _textField, _divColorPicker;  // global vars
  3.  
  4. window.onload = function()
  5. {
  6. _textField = document.getElementById('htxaMessage'); // fill global var  *****    
  7. _divColorPicker= document.getElementById('divColorPicker');  // fill global var  ******      
  8.  
  9.     formDivColorPicker();  // no need arguments ******************************
  10. }
  11.  
  12. function changeFontColor(button)
  13. {
  14.     var fontColor = button.id.split('_');
  15.     // insertAtCaret function is defined in some where else on the page
  16.     insertAtCaret(_textField, '[font color=' + fontColor[1] + ']', '[/font]');
  17.     alert(_divColorPicker.id);
  18. }
  19. function formDivColorPicker()
  20. {
  21.     var op = _divColorPicker;
  22.     var c=0;
  23.  
  24.     for(var i=0, l=JSONColors.length; i<l; i++)
  25.     {
  26.      // DOM-dynamically-created HTML buttons
  27.  
  28.         op.innerHTML += '<input id=' + 'btnColor_' + JSONColors[i].name + ' type=button onclick="changeFontColor(this);" style="width:16px; height:16px; background-color:' + JSONColors[i].value + '" />&nbsp&nbsp';
  29.  
  30.         c++;
  31.         if(c==COLOR_BUTTONS_PER_ROW)
  32.         {
  33.             op.innerHTML +="<br><span style='margin-left:150px'>";
  34.             c=0;
  35.             op.innerHTML +="</span>";
  36.         }
  37.     }
  38. }
  39.  
  40. … markups on the page 
  41.   <tr>
  42.                 <td>
  43.                      <div id="divColorPicker" style="display:none; margin-left:150px; position: static">
  44.                      </div>
  45.                 </td>
  46.             </tr>
  47.  
  48.             <tr style="height:40%">
  49.                 <td align="left" valign="top">
  50.                       <textarea id=htxaMessage cols="70" rows=3 onkeyup="htxaMessage_checkIfEnterKeyHit(event);"></textarea>
  51.  
  52. The codes work fine with the “changeFontColor” function if I use global variables such as var _textField, _divColorPicker;  on window load event and I need to pass this to that function when I create buttons using DOM in the “formDivColorPicker” function. 
  53. However, if I do not use global variables and the form of functions as follows, then I get javascript runtime error like “object is undefined…”  in function “changeFontColor” for arguments like textField and divColorPicker:
  54.  
  55.  
  56. /////////////////////////// version 2 not using global vars but argument passing  ////////
  57. //var _textField, _divColorPicker;  // commented out
  58.  
  59. window.onload = function()
  60. {
  61. var _textField = document.getElementById('htxaMessage'); // local var
  62. var _divColorPicker= document.getElementById('divColorPicker');// local var
  63.  
  64.     formDivColorPicker(_textField, _divColorPicker); // call the function with arguments ******************************
  65. }
  66.  
  67. function changeFontColor(textField, divColorPicker){
  68.     var fontColor = button.id.split('_');
  69.     // insertAtCaret function is defined in some where else on the page
  70.     insertAtCaret(_textField, '[font color=' + fontColor[1] + ']', '[/font]'); // error******
  71.     alert(divColorPicker.id); // error ******
  72. }
  73.  
  74. function formDivColorPicker(textField, divColorPicker){
  75.     var op = _divColorPicker;
  76.     var c=0;
  77.  
  78.     for(var i=0, l=JSONColors.length; i<l; i++)
  79.     {
  80.      // DOM-dynamically-created HTML buttons
  81.  
  82.      op.innerHTML += '<input id=' + 'btnColor_' + JSONColors[i].name + ' type=button onclick="changeFontColor(‘ + textField + ‘,’ + divColorPicker + ‘);" style="width:16px; height:16px; background-color:' + JSONColors[i].value + '" />&nbsp&nbsp';
  83.  
  84.         c++;
  85.         if(c==COLOR_BUTTONS_PER_ROW)
  86.         {
  87.             op.innerHTML +="<br><span style='margin-left:150px'>";
  88.             c=0;
  89.             op.innerHTML +="</span>";
  90.         }
  91.     }
  92. }

Thanks in advance for any help or idea.
johnjsforum
Aug 2 '07 #1
1 2287
acoder
16,027 Recognized Expert Moderator MVP
The underscores need to be removed on lines 71 and 76. You've forgotten to remove them to use the passed arguments.
Jan 1 '08 #2

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

Similar topics

2
2748
by: John VanRyn | last post by:
Ok, I have XML like this (XML Exhibit A) that I read in from a file ala .. $doc->load("./Template.xml"); because I could not figure out how to set the !DOCTYPE element. ------ XML Exhibit A----- <?xml version="1.0" standalone="no" ?> <!DOCTYPE graph SYSTEM "graph.dtd"> <graph/> --------------
4
11172
by: Carlo Sette | last post by:
Hi all, when I try to Parse a sample XML ducument Python display the follow error message: --------------------------------------------------------------------------- Traceback (most recent call last): File "./mysql.py", line 57, in ? DOM=xml.dom.minidom.parseString(XML) File "/usr/local/lib/python2.3/xml/dom/minidom.py", line 1925, in parseString return expatbuilder.parseString(string)
4
5323
by: Skip Montanaro | last post by:
I'm getting somewhat painfully acquainted with xml.dom.minidom. What is the relationship between its documentElement attribute and its childNodes list? I thought XML documents consisted of a single, possibly compound, node. Why is a list of childNodes needed? Thx, Skip
0
1601
by: Steve Roberts | last post by:
I want to write a graphical view of an XML tree, using a DOM interface, that allows the XML tree to be edited, with nodes being added or removed. For this I was going to create a basic tree structure, mirroring the structure held in the DOM. Every node of the new tree would reference a matching DOM node. However, I'm not familiar enough with the DOM to know if it's possible to uniquely identify every DOM node, in such a manner that the...
5
6556
by: Chris | last post by:
Hi, the docs say : "The Xml-document is not loaded into memory when using XmlTextReader, as opposed to using the DOM where the entire document is loaded in memory" but, when using XmlTextReader, how can I parse then if the document is not loaded ? something must be loaded no ?
5
10758
by: segfalt | last post by:
Hey All, I'm wondering if someone can give me a hand with the following. I'm frequently updating xml files, sometimes in bulk updates. I'm having trouble getting the output formatted nicely (not one long line). Here is an example. I would create the doc using something like the following code: $dom = new DOMDocument("1.0","iso-8859-1");
4
1490
by: YAD | last post by:
How do you decide which DOM level you should use? I've been told level 2 is the "modern" approach, but also saw a website that said use level 0 any time you can. Should you use higher-level code where lower-level code works? Does lower-level code fail in modern browsers? What are the issues you have to worry about? -- Yet another Dan
0
1061
by: Greg Copeland | last post by:
I am attempting to freeze an application which uses the dom.minidom parser. When I execute my application, I get an import error of: ImportError: No module named dom.minidom. During the freeze process, I can see: freezing xml ... freezing xml.dom ... freezing xml.dom.NodeFilter ... freezing xml.dom.domreg ... freezing xml.dom.expatbuilder ... freezing xml.dom.minicompat ...
9
2490
by: Lie | last post by:
Why this generates AttributeError, then not? Python 2.5.2 (r252:60911, Apr 21 2008, 11:17:30) on linux2 Type "help", "copyright", "credits" or "license" for more information. Traceback (most recent call last): File "<stdin>", line 1, in <module> AttributeError: 'module' object has no attribute 'dom' <module 'xml.dom' from '/usr/lib/python2.5/xml/dom/__init__.pyc'>
10
2237
by: Simon Willison | last post by:
I'm having a horrible time trying to get xml.dom.pulldom to consume a UTF8 encoded XML file. Here's what I've tried so far: <msg>Simon\xe2\x80\x99s XML nightmare</msg> """ ('START_DOCUMENT', <xml.dom.minidom.Document instance at 0x6f06c0>) ('START_ELEMENT', <DOM Element: msg at 0x6f0710>) .... UnicodeEncodeError: 'ascii' codec can't encode character u'\u2019' in position 21: ordinal not in range(128)
0
11066
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10702
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10801
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
9536
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
7935
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
7099
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5763
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...
1
4584
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
3
3203
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.